Add Flipper Sharing Widget Below Every Post In Blogger

Adding flipper widget is another way of increasing your blog's traffic. By adding this let's your readers share your posts on their favourite social sites. This widget was totally customized by MBT and now i am also sharing this with you.


Why Use It ?

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

Add it to blogger
Go To Blogger > Template
Back up your template
Click Edit HTML > Proceed
Click the Expand Widget Templates box
Search for  <data:post.body/>
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/AVvXsEgdfz5pPy1SQwvAKhpuQhviAL8ZDJsaTy6334cuvt7zvHCgsn9bB_qFUuh1Ks0gfQJiydGGcy77O08gJmRcPFQN6reRTBNwIXox5um0mKF0odcgjN_zIb0x-j5nZcIU-Tv6UN98lye3MkI8/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
Mission Complete , You're Done !