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 ef...

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFBzDETaUh7DKaNCApe4K_qhaTYUv9KQvxhggDD2pIU5XDgZwY9zOcse39a97eRFX8PwdY0CRvhGBxg75yo5VvvX_Ixvb6QlfUdBMmlxfxbQpi8TGGjSXbnVVL8M5WrsO4PguKApc3x8b/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?

• 25 best blogger widgets released in 2011