How to add a Floating Social Bookmarking Widget in Blogger
12:52 PMIf you have seen share bar plugin social widget which floats along with post container’s border. This share bar makes sharing easy and you can add as many sharing button as you want including Facebook share button,Twitter button,Stumbleupon etc.
Actually this share bar definitely increase article share on different websites such as Facebook,Twitter etc.
Not only in WordPress you can add this attractive floating widget in Blogger blog too and it is simpler than simplest and I mean it. To add this sliding social widget you have to add just a JavaScript code any where in your template HTML code.
You can also paste this code snippet as a HTML widget.
If you are unable to add this script code as a HTML gadget then you can add this code any where in the template body code.
To add this code to template body go to the option Design > Edit HTML
Here locate the closing body tag i.e </body> and add the script code just before this closing tag. ( to find this tag you can use the “find” option of internet browser ).
Actually this share bar definitely increase article share on different websites such as Facebook,Twitter etc.
Not only in WordPress you can add this attractive floating widget in Blogger blog too and it is simpler than simplest and I mean it. To add this sliding social widget you have to add just a JavaScript code any where in your template HTML code.
You can also paste this code snippet as a HTML widget.
- So here is a step by step guide how to add this social slider to your Blogger blog.
- First of all you have to login to your Blogger.com account ( Google account). Though I do not need to tell about this
- Now on Blogger dashboard go to the option “Design”
- Here you can see the option “Page Elements” and I think definitely your template is widgetized and you can add gadgets anywhere in your template. Select the option “add a Gadget”. Here select the Gadget type “HTML/JavaScript” and paste the following code in this gadget;
<!-- floating page sharers Start bloghight.com--> <style type="text/css"> #pageshare {position:fixed; bottom:11%; margin-left:-1015px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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;/*bs-fsmsb*/-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="Get this from bloghight.com"> <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> <div class='sbutton' id='rt'> <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script> </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 class="DiggThisButton DiggMedium"></a> </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 style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloghight.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating page sharers End -->
If you are unable to add this script code as a HTML gadget then you can add this code any where in the template body code.
To add this code to template body go to the option Design > Edit HTML
Here locate the closing body tag i.e </body> and add the script code just before this closing tag. ( to find this tag you can use the “find” option of internet browser ).
Thanks for sharing your knowledge about this Social Bookmarking Widget in Blogger. I followed your steps and I have installed it successfully.
ReplyDeleteprivate label seo
This is also one way of making your website's design more compelling and stylish.
ReplyDeletecalgary web design
I think I'll try this out on my blog. Thanks for sharing this.
ReplyDeleteseo london
This is a perfect widget that will compliment to your website design. I've tried this widget and it looked great.
ReplyDeleteweb design perth