How To Add Flipper Sharing Widget Below Every Post In Blogger

Hi Friends , Today i am going to share about how to add flipper sharing widget below every post in your blogger and website. This widget make your  backlinks for sites and  increase your traffic.

 How To Add Flipper Sharing Widget Below Every Post In Blogger

    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>

        /*--------TricksTeacher 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/AVvXsEi5HtE-ri47oRFVt64ne9zhOALP80nWW9gQJa9DjdXhgPg-jWmkmbUBSTGh5LvpUiLpjXVJxBV-tL0jgfyZSS64v3QAbNam5wglYMkAklDC3469MTxGLuuPQTaNG0Vcdtqrn85dXwN61JzD/s1600/tricksteacher.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"/>

Then save it and enjoy :)