HOW I PUT FLOATING SHARE BUTTON TO MY BLOGGER BLOGSPOT SIDE BAR

Some people who just started a BlogSpot want to know how I put a floating side bar like button to my blogger /blogspot. It is not hard but it’s very simple and today we are going to learn this simple trick of placing a like button that floats on the side bar.

First copy this below codes:

<!–SideBar Floating Share Buttons Code Start–>

<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid green; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><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='sbutton' id='rt'><a href="http://twitter.com/share" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://onenaijablog.com" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

<!–SideBar Floating Share Buttons Code End–>

Now logging to your blogger dash board and click on design. Are you there?

Now click “Add a Gadget” a new windows will pop out, locate and click “HTML/javaScript” see screenshot

and paste the code you copied above to the box and save it.

Now save your work and view your blog

You have successfully place a floating share button widget to your blog.

Now tell me how simple is that? Click like button if you like this post and don’t forget to drop your comment…

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *