Add Flipper Sharing Widget Below Every Post In Blogger

 

How To Add Flipper Sharing Widget Below Every Post In Blogger?

• First for All Go To Blogger.com > Design > Edit Html
• Find <data:post.body/> Using CTRL+F
• Copy the code below and paste it just after <data:post.body/> tag 

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

}

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

To Change The Color Of The Text That Appears On The Top Of The Widget Edit #333333