The NetMediaBlog

How to add a floating social sidebar on blogger

By 5 Comments

The use of social networks has been on the increase in recent years. Integration of websites with social networking platforms is a necessary step to getting your blog or posts shared all over the world. This is the easiest way to increase the traffic to your blog. A floating social buttons in either the left or right side of your page (Social bookmarking) will be the easiest way for your visitors to share the posts they like. A social share button could consist of Facebook like button, Twitter retweet button, Google plus button, StumbleUpon button,Digg button etc I strongly suggest you add a floating social sidebar to your blog as the share options will be made visible across the blog post and will help share the posts they like with their folks.



How To Add a Floating Social Buttons in Sidebar for Blogger:

  1. Log in to your Blogger account
  2. Click on design
  3. Click on Add a Gadget on the sidebar
  4. Select HTML/Javascript
  5. Paste the code below into the box and save, don’t add a title.

 

<!–SideBar Floating Share Buttons Code Start–>
<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; 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://netmediablog.com/how-to-add-a-floating-social-sidebar-on-blogger/” target=”blank”><font color=”black”>[Get This]<font></font></font></a></div></div>

<!–SideBar Floating Share Buttons Code End–>

Save the gadget and preview your blog.  Now i hope you can add a social sidebar on your blogger blog. Remember to also share this post with your friends using the social sidebar on this blog. Please Subscribe to NetMediaBlog Feeds by Email.

 

Other Posts You May Like...

Comments

  1. wonderful issues altogether, you just won a new reader. What may you recommend in
    regards to your publish that you made a few days ago?
    Any positive?

  2. This side bar never showed up on my blog. I was only able to see a +1 button and a “Share this” link appear in the bottom of my blog… The gadget looks great though.

  5. You made some respectable points there. I looked on the web for the issue and located most individuals will go along with together with your website.

Leave a Reply

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

Find Us on Facebook

Recent Comments