Easiest Way to Add Floating Social Media Bar to your Blog

Ever wonder what’s the easiest way to add a floating social media bar for your blog? Wonder no more because I will share to you how to do it the easiest way, no kidding! You can easily implement this to any Blogger template you’re using whether it’s the default Blogger templates or customized/converted one.

Social Media Icons

By the way, if you have no idea yet what I’m talking about, the floating social media bar is the one you see to the left of this page that contains buttons for Facebook Like, Google +1, Tweet, Stumble Upon, Digg, and Facebook Share, that will still be visible even if you scroll down to the bottom of the webpage. The purpose of these buttons is mainly to let you or your site visitors share posts easily to different social network sites. The picture below shows another implementation of this floating social media bar.

Download FREE Blogger Templates

I’ve seen lots of tutorial about adding a floating social media bar and they require you to edit the HTML code of your template. Novice bloggers may find this quite cumbersome and may even end up ruining their entire design. This tutorial does not require you to edit the HTML code of your template and you can either add or remove social media buttons depending on your preference. Also, by adding this floating social media bar to your blog, you don’t have to enter the codes for the social media buttons every time you publish a post. It also has a counter for each button and every page automatically shows the number of times it was shared.

Adding the code

Now here’s how to install this floating social media bar. Sign in to your Blogger account then go to Layout. Click on Add a Gadget, we just need to add a HTML/JavaScript widget. Enter the code below and then save it.

<!-- Floating social media buttons -->
#floatingbuttons{position:fixed; bottom:35%; margin-left:-820px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#f5f5f5;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#000;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
   2: <script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); 
</script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
   2: <div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
   3: <div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div>
   4: <div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
   5: <div class='sbutton' id='su'>
   6: <script src="http://www.stumbleupon.com/hostedbadge.php?s=5">
   1: </script>
   2: </div>
   3: <div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
   4: <script src='http://widgets.digg.com/buttons.js' type='text/javascript'>
   1: </script>
   2: <a class="DiggThisButton DiggMedium"></a></div> </div>
   3: <div class='sbutton' id='fb'>
   4: <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">
<br><a href="http://www.infohiway.net/2011/11/easiest-way-to-add-floating-social.html">Get This</a><br/>
<!-- end Floating social media buttons -->

Adjusting the position

After adding the code, the social media bar may show up on the page where you don’t want it to be so to adjust its position just change the following code.

Vertical position: Look for the code below (use Ctrl+F) and change the percentage (in red) until you get the desired vertical position of the bar.


Horizontal position: Look for the code below (use Ctrl+F) and change the pixel count (in red) until you get the desired horizontal position of the bar.


Don’t forget to save it every time you make some changes to the code. That’s it! I told you this is the easiest way to add a social media bar to your blog.

Thanks again for taking time to visit InhoHiway.

If you enjoyed this article and wish to receive more great articles from me then don't forget to subscribe to my regular Email Updates to receive Latest Articles in your Mailbox.

Feel free to reuse this blog's contents under a Creative Commons Attribution Sharealike license unless otherwise noted.

Recommended Articles:

Web And Internet 4512294936714330504

Post a Comment

Your feedback is highly appreciated. Unnecessary or irresponsible comments will be deleted immediately. Thank you.



Recommend on Google

When signing up you will initially receive a confirmation email requiring your approval to complete the subscription.


Site Stats

Technology & Computers - Top Blogs Philippines