How to Create Floating Bar For Pinterest & Other Sharing Buttons-Easyway

A web publisher has to do a lot of things to let the internet world know that he has something to bring to them and that is through the social media buttons. The need to wave the banner of your blog is not an easy undertaking unless you have to link with this kind of tricks. This sharing bar would float to the left of your blog posts and would float as the visitor scrolls up or down. This widget contains counters of important social networking sites that has the potential to bring you traffic by circulating your content to a wider audience. We have tested the widget on major browsers like IE7+, Firefox, Chrome etc. and found it working just fine with no compatibility issues or design conflicts. Let's get to tutorial now!

 Adding Floating Bar To Blogger

The steps are so easy to apply. All you need is to copy and paste the code.. Please follow the steps below:

1.Proceed to Blogger > Template
2.Backup your template
3.Click Edit HTML and Then Click Proceed
4.Search for

   <b:includable id='post' var='post'>

5. Just below it paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ojw56vhwrNOmfl05O5X5sNiqsfBs12S_FZ2v7t2FZuqz1u0XLlUU1h7_2oD3-w31o-CxK76bGzHVChsgT_UW1zj1A2sXnvf0aS-cCkpyY9KJj_2i7lULy-uojB-3Gdsdr_wFY2Pb8s9k/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ojw56vhwrNOmfl05O5X5sNiqsfBs12S_FZ2v7t2FZuqz1u0XLlUU1h7_2oD3-w31o-CxK76bGzHVChsgT_UW1zj1A2sXnvf0aS-cCkpyY9KJj_2i7lULy-uojB-3Gdsdr_wFY2Pb8s9k/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.mbt_social_floating  .stButton_gradient{
    border:none !important;
}
.mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}


.st_fblike_vcount{

    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}


.st_email{

    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.mbt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.mbt_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}


.mbt_social_floating .st_pinterest_vcount .stBubble{

    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfU7zdIkwOf9HQak5tUd0zb6zMEJA9NT8pmdNZv-z13eJcBlj5Ldlb9ZeGez2gjg5vsD0if4J-ADs1EqqJHqipoYH2zV0d7KZIJaeSwwqDc4bbFvEhJa97kanQ3nPnVutKkicH8_Yjk47/s400/bubble_arrow_pinterest.png') !important;
}



.st_pinterest_vcount{

    margin-bottom: 0px;
    display: block;
}


</style>



<div class='mbt_social_floating'>

    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    <!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
    <span class='st_twitter_vcount' displaytext='' st_via='mybloggersnipers'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>
 
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Just replace mybloggersnipers  with your twitter username. 

   6.  Save your template and you are done!

God Bless Folks!