How to Create a Floating Sidebar Buttons for your Blog

 photo Top-3-Social-Networking-Sites_zps31293f60.jpg 
If you write a blog or maintain a website, it’s quite essential to get a lot of exposure. Social media plays a role in this since it’s technically free advertising that you get. This would include social networking sites like Facebook, Twitter and Google Plus as well as news aggregating sites like Digg and Stumble upon. There are a lot of different ways to go about this, one of which is making sure that your readers get a chance to like or share your articles with their friends via a floating sidebar. I’ll show you how in this post.

This article will show you how you can have the below floating sidebar on your webpage or blog. My blog is based on blogger so my guide will primarily be for that platform. The HTML code here should be universal though so you can use it as well.


Step 1: Go to –> Layout –> Add a Gadget –> Add HTML/JavaScript

Step 2: Add a title like “Floating Sidebar” then take the code below and paste it.

  • The green highlight will define where in the screen your sidebar will appear. The “Top” highlight defines how high or low you want it on your screen and the “Right” highlight defines which side of your screen you want it to be.
  • The yellow highlight defines the background color of your sidebar. You can refer to websites that give you a hexadecimal value of color and replace that with the current value.

<!-- Sidebar buttons from><style type="text/css"> #pageshare {position:fixed; top:90%; right:0%; float:right; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color: #cc3333;padding:0 0 5px 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_topjavascript:void(0), .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">
<style="margin-left:8px;"><class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src=''></script><fb:like layout='box_count' show_faces='false'></fb:like> <span> __</span>
<class='sbutton'><a class='twitter-share-button' data-count='vertical'  expr:data-counturl='data:blog.url' href='' rel='nofollow'>Tweet</a><script src=''; type='text/javascript'></script> <span> __</span>
<class='sbutton' id='su'> <script src=""></script>  <class='sbutton' id='digg' style='margin-left:3px;width:48px'> <span> __</span><script src='' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> <span> __</span><class='sbutton' id='gplusone'> <script type="text/javascript" src=""></script> <g:plusone size="tall"></g:plusone></class='sbutton'></class='sbutton'></class='sbutton'></class='sbutton'></class='sbutton'></style="margin-left:8px;"></div><br/><!-- Sidebar share buttons End –>

That’s about it. Just mix and match and you’re good to go. Your blog should be able to show the floating sidebar.
Next PostNewer Post Previous PostOlder Post Home