June 9, 2012

Widgets

Flipper Sharing Widget


flipper sharing widget
Two years ago we released a simple sharing widget using the flapper Icon set. We made use of CSS sprites in order to make the roll over effect more quick and effective. Now when we have already taught most of you how to apply CSS3 transitions, its time to apply them in a different way. I just designed two additional flapper icons for Pinterest and Google Plus and now this new version has several benefits over the previous. The Icons rotate vertically and flips upon mouse hover. The time taken by the effect is so small that the user rarely notices image shift. We will be releasing some more social media icons in coming days with some unseen CSS3 effects to let you take the full bliss of animation without using jquery. Please see a demo first:



Live Demo



Update: Google Plus link has been corrected and now you can share your posts on Google+ too with both thumbnail and description.

Our Lab is too over crowded with gadget and plugins so please wait for a minute for the page to load.

How it works?

We used our predesigned icons and packed them into one image. Then we created separate classes for each icon by specifying the background position property in order to connect the sub classes with the main class containing the Packed image. For the vertical flip effect we used the property of ease-in and timed it at o.15 seconds.
Flapper set includes a total of 12 icons but we have excluded Technorati, yahoo and YouTube icons in order to make use of the more useful ones like:
  1. Google Plus
  2. Facebook
  3. Twitter
  4. Pinterest
  5. Delicious
  6. Digg
  7. Stumble upon
  8. Reddit
  9. RSS

Why use it?

  1. It uses only CSS and no Scripts,
  2. It loads from your very own blog and does not connect to third party servers,
  3. It loads fast and looks great!
  4. Attracts readers and increases chances of social circulation

Add it to Blogger

This gadget can be inserted easily in any blogging platform by making simple changes to the Sharing links. Blogger users can follow these easy steps to install flipper on their blogs:
  1. Go To Blogger > Template
  2. Back up your template
  3. Click Edit HTML > Proceed
  4. Click the Expand Widget Templates box
  5. Search for  <data:post.body/>
  6. Just below it paste the following HTML code
<style>
/*--------Flipper Sharing Widget ------*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(http://4.bp.blogspot.com/-dlD3BDKTZjA/T9IuXkfhSeI/AAAAAAAAGno/s8BGOkjdwX0/s1600/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;   
-moz-transition: ease-in 0.15s all;   
-o-transition: ease-in 0.15s all;   
-ms-transition: ease-in 0.15s all;   
transition: ease-in 0.15s all;
cursor:pointer;
}

.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}

.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}

.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}

.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>

<div class='flipper'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Pleaseshare">
Please Share it! :) </div>

<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!-- Pinterest -->
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>
</b:if></div>
<div style="clear:both"/>
Make these changes:
  • To change the color of the text that appears on top of widget edit #333333
  • If in case you wanted to remove some icons then just delete its code. For example if we wish to remove the Digg icon from the list then we just need to delete the code:
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
The HTML has been cleanly indented and structured so you would not encounter any trouble playing with the code.

Play with the code

If you are looking to rearrange the icons or shuffle them or even to remove some then you would enjoy using our HTML editor.
Tip: Copy and paste this entire code inside the HTML editor and hit preview!

Need help?

If you trouble shooted yourself then just let us know. I just hope you find this new gadget worth trying. I have planned some more gadgets for this week and I am sure they would engage your readers even more. Peace and blessings pals. :)
Did you check the following?


If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

35 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. I Just noticed your new Footer. It's Awesome !

    I hope you will share with us soon ;D

    ReplyDelete
  2. Bro there is one error

    Correct The Pinterest Line. you have not closed the url

    Wrong: href='http://pinterest.com/
    Correction: href='http://pinterest.com/' ( Last Coma )

    Learning HTML now-a-days :D

    ReplyDelete
  3. @haider

    Thanks for correcting haider and yes sure I will share the widgets used in footer.

    Glad to know you enjoying HTML dude :>

    ReplyDelete
  4. Also Bro The GPlus button do not work for +1 Post

    Just check once i did little customization at skfanclub

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Thanks nice widget :)

    http://nannu4u.blogspot.in/

    @haider :: Y U Always Comment first ? :P

    ReplyDelete
  7. Google plus button not working..

    ReplyDelete
  8. I like the style of this widget
    but its animations are little bit speedy. I dont like it. Over animated bro..
    I like your footer. Hope you will share its secrets.
    I sent you a mail through contact me forum. You not gave me a reply yet.
    Hope you will give it soon..

    http://achusoft.blogspot.com

    ReplyDelete
  9. its showing error on my blog
    please help

    ReplyDelete
  10. Error parsing XML, line 1279, column 56: Element type "a" must be followed by either attribute specifications, ">" or "/>"

    ReplyDelete
  11. @haider @freen8apps
    Since no direct script for G+ share is available or may be I could not get one. I have provided a link directly to the users profile. If you found a code for G+ or pinterest icons then please share it.


    @ aswath

    If you think you don;t like the transitions then you can delete the following code:


    -webkit-transition: ease-in 0.15s all;
    -moz-transition: ease-in 0.15s all;
    -o-transition: ease-in 0.15s all;
    -ms-transition: ease-in 0.15s all;
    transition: ease-in 0.15s all;

    This will remove the flipping effect.

    I will check your mail bro. Actually the number of emails per day are increasing daily and its getting difficult to manage blog.

    @Abdul Rafay
    I just updated the code. it works fine now. Apologies for inconvenience.

    ReplyDelete
  12. Bro
    The google plus and Pinterest sharing are not working
    Why cant you use the same code of your floating widget ( google +1 , Pin it ) for fixing the problem ?

    http://achusoft.blogspot.com

    ReplyDelete
  13. Mustafa bhai just see how i did on skfanclub.com

    i think for time being we can use like this .....

    ReplyDelete
  14. thanks brother i love this site

    ReplyDelete
  15. Brother,
    How do you solved the Error problem ?
    Please explain
    When i created a subscribption box below post, I got an error saying " Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Element type "form" must be followed by either attribute specifications, ">" or "/>". "

    but i closed form tag. Then whats the problem ???
    Please help me to solve the problem
    plsss...

    ReplyDelete
  16. in my template is at 2 places where should i paste this code now

    ReplyDelete
  17. it doesnt appear on my blog :( I pasted your given code on right place.. what i do ? :S

    ReplyDelete
  18. @twinkle The widget is working just perfectly. See another demo here Flipper Sharing


    @Aswath

    The google plus button would still take the visitor to his profile where he can share your link. So it works pretty good though we don't have a direct script for it.

    for that error, make sure all div,form,a,p tags are closed properly

    @karthik

    the first occurrence buddy.

    @yatheen

    You didn't try it :)

    ReplyDelete
  19. Thanx Alot Mohammad Bro !

    Visit : www.CsLoversPro.Blogspot.Com

    ReplyDelete
  20. How to show the share counter?

    ReplyDelete
  21. looks great but the only one that is linking is pintrest? too bad.... anyone else have this issue?

    ReplyDelete
  22. Yes, the only one which is working is Pinterest...

    ReplyDelete
  23. Why we need RSS button in this sharing widget?
    because it showing codes, what user will do with that code? only SE can understand it.

    ReplyDelete
  24. i am confused ..in new blogger template data:post.body/> shows are 3...
    what is a place to paste these codes??1data:post.body/> or 2 data:post.body/>
    3 data:post.body/> ????

    ReplyDelete
    Replies
    1. Furqan, I had 2 and it only worked when I added to the 2nd. Hopt his helps

      Delete
  25. Thank you so much for this wonderful tool. I was able to install it and am glad to see it in my post. However, is it possible to have it under each post? By that I mean that on the home page none of the posts show the plugins, only when you go to each individual post. Since people can read the post in its integrity from the home page, they may not see them. Thanks again.

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |