Flipper Social Media Sharing Widget Below Each Post For Blogger

Social Sharing widgets are very important for any blog because they offer an easy way to share the content to the readers. So, I am going to tell you a CSS powered flipper widget for your blog which can be added below the blog posts. This widget doesn't require any external script and hence doesn't increase the site load time.

Follow The Instructions Below:

• Login to your blogger account.
• Go to Template > Edit HTML > Proceed > Expand Widget Templates.
• Seach for the line <data:post.body/>
• If <data:post.body/> appears for more than one times in your blog's template, then copy and paste this code just after the second appearance of <data:post.body/>

<style>

/*--------Flipper Sharing Widget By PCTRICKSGURU.COM------*/

.flipper a {

display:block;

height:48px;

width:48px;

padding:0 4px;

float:left;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwu1g08DLRFDIW3LIJ9nSVLTGA3Ia0lDpXmFa6CQqqO0bMrhn-9XawWxejBXR_xFekZOTVLWtKG1qilDeSqXNwiCAvFeLZqny5wPDFUnrx3Z2bI1SnrS2iLEZsC9T22rcRRSdu5Ie1FYbz/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;

}

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

If you liked the post, 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;'/>

</b:if></div>

<div style="clear:both"/>

• Save your template and you are done.