How to Add Floating Social Media Button At Blogger Blog

Published by Author

Dear friends welcome to my this tutorial about adding floating social media button on blogger blog. It's totally as simple as to learn or use. I have included facebook share, retweet, digg, stumble upon, and google+1 button and you could add more social buttons on it later. Now let's go ahead to learn about this tutorial.

see the screenshot below
 
Step 1 

Login to your blogger Dashboard and go to Design --> Page Elements.

 
Click on 'Add a Gadget' on the sidebar.

 
Select 'HTML/Javascript' and add the code given below and click save.

   <div style="display:scroll; position:fixed; top:40%; left:2%; 
border: 1px dotted #E8E8E8; padding:0px 0px 0px  5px; height:220px;
 width:53px ">      
    <table cellpadding="1px" cellspacing="0">       
    <tr>       
 <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">  
   
 <div id='fb-root'/><script 
src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like 
font='' href='' layout='box_count' send='false' 
show_faces='false'/> 
      
    </td>       
    </tr> 
<tr>      
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">       
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>       
    </td>       
    </tr> 
<tr>      
    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;"> 
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mytrafficbots">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>       
    </td> 
</tr> 
 
</table>      
    </div>

Simply replace mytrafficbots with your twitter username.

Save your widget and you are Done!

See your blog to find a light and beautiful widget hanging at left side of your blog. Hope you like it! :)

Kindly Bookmark this Post using your favorite Bookmarking service: