Flipper Sharing Widget (Search for <data:post.body/>) http://www.mybloggertricks.com/2012/06/flipper-sharing-widget.html

ShareButtons.html

<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"/>

http://www.mybloggertricks.com/2012/06/flipper-sharing-widget.html