[Blogspot] -How To Add New Floating Sharing Bar To Blogger

Vertical floating social sharing bar is one of the best blogger widgets,because you can notice increasing trend of floating social sharing widgets.This version is the upgraded version than previous versions,in this widget you will get facebook like button,twitter tweet button,pinterest pin it button,google +1 button,addthis sharing button and print button.Also the installation of this widget is 1step installation,so that you can easily implement it into your blogger blog,Now lets see how to add it to your blog.

[Blogspot] -How To Add New Floating Sharing Bar To Blogger

How To Add New Floating Sharing Bar To Blogger?
First Go to Blogger Dashboard > Template
Download a copy of your template
Click Edit HTML
Hit Proceed button
Check Expand Widget Templates checkbox
Find for below code in your template,

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

Add below code just after/below of above code,

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.hb_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;
}
.hb_social_floating .hb_side_social_button {
margin-bottom: 5px;
float: none;
height: auto;
width: 60px;
}
.hb_social_floating .st_twitter_vcount, .hb_social_floating.st_plusone_vcount, .st_email {
margin-left: 5px;
}
.hb_social_floating .st_fblike_vcount {
margin-left: 5px;
}
.hb_social_floating .stButton_gradient {
background: none !important;
height: 21px !important;
padding-left: 0 !important;
}
.hb_social_floating .chicklets, .hb_social_floating .stMainServices {
background: url(&#39;
http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1h7iYXXdbvdIL5iC3FE9PofKhAXfpVAg2-Ze2erX69Tg2NzUg2N033EJLma5ZFdYHmIBNuyWfdojG0auhaGNu7ZXLZca5I7Qkp1fan9oSC56h5Nn_HTEBtQT0ok0K-zI4OvjuqimgwcLi/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;
http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1h7iYXXdbvdIL5iC3FE9PofKhAXfpVAg2-Ze2erX69Tg2NzUg2N033EJLma5ZFdYHmIBNuyWfdojG0auhaGNu7ZXLZca5I7Qkp1fan9oSC56h5Nn_HTEBtQT0ok0K-zI4OvjuqimgwcLi/s400/gc_social_sprite.gif&#39;
) !important;
}
.hb_social_floating .st_twitter_vcount .st-twitter-counter {
background-position: 0 -58px !important;
}
.hb_social_floating .stButton_gradient {
border: none !important;
}
.hb_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;
}
.hb_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;
}
.hb_social_floating .stBubble {
background-position: 21px 31px !important;
height: 35px !important;
}
</style>
<div class='hb_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='Cong nghe thong tin'/>
<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;Helper Blogger&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#CF152A&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.helperblogger.com/2012/06/new-version-of-vertical-floating.html' style='color:#CAC8C8;'>Widgets</a>
</p>
</div>
</b:if></b:if>

Now replace "Cong nghe thong tin" with your twitter username in line number 107.
If you want to edit the position or background color of the bar then edit the lines from 6 to 10.
Finally save your template and you are done!
Credits

Source: http://www.helperblogger.com/2012/06/new-version-of-vertical-floating.html