Add share this floating bar to Blogger

If you want more visitors came to your site so you should have to add share this floating bar to your blog. In this post i am here to show you that how you can add share this and increase your traffic. If you add this floating bar to your blog it will showing on your every post and people can easily share your post via Facebook, Twitter, Pinterest and also on in this floating bar there is +1 Button. I spend too much time to creating buttons and this floating bar.This floating bar have also facility of sharing post via Email address with your friends or anyother.So, here are simple steps you should follow to add Floating bar to your every post.

Step 1:

Go to Blogger and click on Template Tab and Edit Template.

Step 2:

Check the Expand Widget Template Box.

Step 3:

Find the following code (Tip: Press CTRL+F to find code.)

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

Step 4:

Paste the following code just below the above 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/AVvXsEguaS8dZpzJ5Ap8VbHsu_6PZ5-fwHfDSpA65UE5r3Yd2DFBrXbOf2OpYZ3MWbAel3QwTDrA4Ke-0XsfBGKzdaFldSLedSHzfZAWZi3Q01q64wzu6I9YGdMgmypOQaWwck0CIxARxDB30_Jx/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/AVvXsEguaS8dZpzJ5Ap8VbHsu_6PZ5-fwHfDSpA65UE5r3Yd2DFBrXbOf2OpYZ3MWbAel3QwTDrA4Ke-0XsfBGKzdaFldSLedSHzfZAWZi3Q01q64wzu6I9YGdMgmypOQaWwck0CIxARxDB30_Jx/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; 

} 

</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});</script> 

    <span class='st_fblike_vcount' displaytext=''/> 

    <span class='st_twitter_vcount' displaytext='' st_via='The Web Skills'/> 

<div style='margin:5px 0 0px 0;'> 

<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a> 

<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/> 

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> 

<script type='text/javascript'> 

function run_pinmarklet() { 

var e=document.createElement(&#39;script&#39;); 

e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); 

e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); 

e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); 

document.body.appendChild(e); 

} 

</script> </center> 

</div> 

<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;The Web Skills&quot;, 

ui_header_color: &quot;#ffffff&quot;, 

     ui_header_background: &quot;#0080FF&quot; 

} 

</script> 

<span class='st_email' displaytext=''/>  

</div> 

</b:if></b:if>

 After Adding code replace The Web Skills with your twitter username and you have done.

If you find this post helpful so please share this post.