It is the latest trend to get share your posts all over the world. This is a one way to increase your traffic to blog. Did you notice on most of blogs using Floating Social Buttons in left side or in right side of the page.here’s a tutorial on how to add a Mashable-like floating bar of social media buttons to a Blogger blog. Here included Facebook Share, Twitter, Digg This and Google +1 (plus one) buttons in the bar. Each of them comes with a live counters.
1. Step of Adding the Floating Social Buttons buttons
Login to your Blogger account.
Go to Design > Page Elements.
Click Add A Gadget.
In Add A Gadget window, select HTML/Javascript .
Copy the code below and paste it inside the content box.
2. Copy the code below
<!-- Floating social media buttons by www.howbler.com --><style><br />#floatingbuttons{background:#fb9a37;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fba94f), color-stop(1, #fb9a37));background:-moz-linear-gradient(top, #fba94f, #fb8f22);border:1px solid #B35319;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;margin-left:-100px;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:#fff;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 class="floatbutton" id="facebook"><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class="floatbutton" id="google+1"><g:plusone size="tall"></g:plusone></div><div class="floatbutton" id="twitter"><a href="http://twitter.com/share" class="twitter-share-button" count="vertical">Tweet</a></div><div class="floatbutton" id="linkedin"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" counter="top"></script></div><div class="addbuttons"><a href="http://www.howbler.com/2011/06/blogger-widget-add-floating-social.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Floating social media buttons by www.howbler.com -->
No comments:
Post a Comment
After your comment please bookmark us.