Adding Floating Share Buttons with Pinterest ‘Pin it’ to Blogger Posts

Looking for how to create "Floating Share Buttons with Pinterest ‘Pin it’ to Blogger Posts" There you have it today!

This sharing bar widget 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.Adding these floating share buttons to your blog is a sure way to drive more traffic to your posts as users visitors find it easier using the fixed buttons. It’s a clear message asking them they should share the post.

How it looks?

Adding the Floating Share Buttons to Blogger

The steps are kept extremely easy to apply. All you need is to copy and paste the long chunk of code. Follow these friendly steps:

1. Go to Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Click Proceed
5. Then Click Expand Widget Templates
6. Search for

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


    7. 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/AVvXsEii-hXbrvA74W9UnTkgg4Q7Clvgo06k6lADxoqd_tRwWe-7zl20fmS5HonO42m486hQ0NsMXdX4pXGHjL4NdM5bmvRCxwpO05kt-vrQ1Dd1A_wvzkVVIJ1dbAuA5D7rxYAvlcbtoaEzeiCf/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/AVvXsEii-hXbrvA74W9UnTkgg4Q7Clvgo06k6lADxoqd_tRwWe-7zl20fmS5HonO42m486hQ0NsMXdX4pXGHjL4NdM5bmvRCxwpO05kt-vrQ1Dd1A_wvzkVVIJ1dbAuA5D7rxYAvlcbtoaEzeiCf/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='Techno_Clouds'/> 
<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;TechnoClouds&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://technoclouds.blogspot.in/2012/08/adding-floating-share-buttons-with.html' style='color:#CAC8C8;'>Widgets</a></p> 
</div> 
</b:if></b:if>







Replace Techno_Clouds with your twitter username.
8. Now save your template and you are all done!

NOTE:This widget will only be shown in post pages and wont display on homepage.The widget has a white background and floats to the left of blog posts. If incase you want it to float to right then all you need is to edit the part of the code bolded in black.