In the present time, the social bookmarking websites like Facebook, Google +1, Digg, Twitter, StumbleUpon play a major roll on the internet. These websites has a huge number of visitors daily. If you put sharing buttons for these websites on your website, they can drive much traffic to your website. Also your website will be more popular on these social networking websites as well as on the internet.
In the following tutorial, you will learn to add these floating social media buttons to your blogger in the given simple steps:-
In the following tutorial, you will learn to add these floating social media buttons to your blogger in the given simple steps:-
Firstly you should disable share buttons for the “Blog Posts” widgets enabled by default. If you do not disable this option, the Google +1 button will not work properly.
1. Go to Dashboard > Design > Edit HTML. and search for <head> tag and Paste the following code just below it and Save the template.
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
2. Go to Design > Page elements
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
2. Go to Design > Page elements
3. Add a gadget, Select HTML/Java Script gadget.
4. Now leave the “Title” blank and drag this Gadget to the left sidebar.
5. Copy the following code and paste inside this gadget in content box.
6. Click on Save. The social media floating widget has been installed on your blogger.
<style>#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #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:#fff;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><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>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><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>
<div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>
<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>
<div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class="addbuttons"><a href="http://www.hints-and-tricks.com/2011/11/how-to-add-floating-social-media-widget.html " title="How to add floating social media widget to blogger. "><span class="getfloat">Get buttons</span></a> </div> </div>
<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class="addbuttons"><a href="http://www.hints-and-tricks.com/2011/11/how-to-add-floating-social-media-widget.html " title="How to add floating social media widget to blogger. "><span class="getfloat">Get buttons</span></a> </div> </div>
6. Click on Save. The social media floating widget has been installed on your blogger.
You can see example of this widget on left hand side of this blog.
