Add Floating Sharing Bar On Blogger

Now I share a tutorial with you of Floating Sharing Bar.In this we included Facebook Like button,Google+ Button,Twitter Button,Linked In as well as stumble Upon also in the bar and each social button with counter.This Widget is purely CSS and Compatible on All Browsers.This widget Installtion is easy and reliable.


Live Demo: See your left side

How install it in Blogger??

1.  Login in your Blogger Dashboad>>Layout>> Add A gadget

2.  Select HTML/JAVASCRIPT  code gadget

2.  Now paste the below code in content area of  Gadget.

<style type="text/css"> #floating_bar { background-color:#fff; position:fixed; padding:0 0 3px 0; bottom: 30%; margin-left:-60px; float:left; border: 1px dotted #f7f7f7; border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; z-index:10; }#floating_bar { clear:both; } </style> <div id='floating_bar'> <div style='margin:10px 0 5px 13px;' id='like'> <div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div> </div> <div style='margin:0px 0 0 10px;' id='gplusone'> <g:plusone size="tall"></g:plusone> </div><div style='margin:5px 5px 5px 6px;'><a href="https://twitter.com/share" class="twitter-share-button" data-via="chahmadnaeem" data-lang="en" data-count="vertical">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> <div style='margin:5px 5px 5px 5px;' id='linkedin'> <script src='http://platform.linkedin.com/in.js' type='text/javascript'></script> <script data-counter='top' type='IN/Share'></script> </div> <div style='margin:0 0 10px 11px; id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <p style='line-height:0px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html' rel='nofollow' style='color:#333;'> Get Widget</a></p> </div>

Note: Replace chnaeemaslam with your twitter username. 

4.  Clcik save.

5.  Drag the gadget and change the position of gadget from Top to below posts.Screenshot is given below:

5.  Click the orange Save button (Place at top right Corner)

6.  Sometimes Facebook Button is not working Properly.At this time we use another CSS Code.

7.  Blogger Dashboard>>Template>>Edit Template

8.  Now Search this below Tag 

</body>

9.  Paste the below code before closing body(Paste the below code above </body>

<div id="fb-root"></div> <script>(function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Customization:

Vertical Alignment's:
 In CSS section change the 30 %  value which is suitable for your blog  i.e

bottom: 25 %;  or bottom: 30%; or bottom: 35%;

 Horizontal Alignment:
To change the position from right to left or Left to right chnage the below code.

margin-left: -60px;

 Negative Value Pushes the floating bar left of the main blog column,Positive value pushes it to Right.

From Writer's Desk:

I hope  you understand this tutorial very well.I already used this widget and It is very useful for me.If you like this gadget share it with your friends. Incase of any problem please comment below
Your response through is too much important to us

-->