Add Floating Share bar with Count widget in Blogger

Floating social media and bookmarking share bar with share count is a very appealing and must have widget for Blogger blogs. It placed beside any post and this widget helps to share a post very fast and collect how many time post been shared. It also gives your blog a professional look and get more visitor from various social media sites. Several months ago when I did published a Floating share bar with icon from that time I thought about to publish a Floating share and bookmarking bar with count widget. And here it is, this widget developed by me its lightweight, simple and small looking, got share service Facebook, Twitter, Google plus and Addthis. I didn't put other service like Linkedin, Stumble upon, Pinterest because I putted Addthis which integrated with 300+ share service include count. Build with CSS, HTML and necessary scripts. Let's see how it looks like and how to add this share bar in your Blogger blog.

Add Floating Share bar with Count widget in Blogger 

Preview-  

Live Demo- (Click Here)



How to add this widget in Blogger

Step 1: Back up your template (Optional step)

• Log in to your blogger, select your blog, 

• Select 'Template' tab option, click 'backup/restore' from upper right corner. 

• Download full template and save it on your computer's Harddrive

Step 2: Installing (Mandatory Step)

• Then, From 'Template' tab, select 'Edit HTML' 

• And find (Using Ctrl+F or Cmd+F) this line-

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

• And paste all given codes under <b:includable id='post' var='post'> and 'Save template'. 

<b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:blog.pageType
!= &quot;static_page&quot;'>
<style>
.ks-bar {border:#e3d6e0 1px solid;
width:70px;
height:280px;
border-radius:5px 5px 5px 5px;
bottom:30%; margin-left:-80px;position:fixed;}
.ks-bar1 {border:#f8f8f8 1px solid;
width:62px;
height:272px;
border-radius:5px 5px 5px 5px;
margin:3px 3px 3px 3px;
background:#f5f5f5;}
.ks-boxe {height:63px;
width:100%;
padding:3px 3px;
}
</style>
<!--crawlist.net widget starts-->
<div class="ks-bar">
<div class="ks-bar1">
<div class="ks-boxe">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class="ks-boxe">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class="ks-boxe">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class="ks-boxe">
<div class='addthis_toolbox addthis_default_style '>
<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;crawlist&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
</div>
</div>
</div>
  </b:if></b:if>
<!--crawlist.net widget ends-->

• Preview your blogger blog and see this sharing widget's work in live. 

• This widget will not appear on Homepage.

Template Compatibility

• This floating Social media sharing and bookmarking bar widget is compatible with almost all standard templates but unique designed templates or highly coded templates (like HTML5 templates) will not accept this.

So don't forget to mention what you think about this widget any how it working feedback leave with
comment. P.S stay subscribed because new version of floating share bar will release soon. Goodluck