As it appears that google emphasizes people's choice to rank pages at SERP, the importance of social media buttons for blog pages or posts have drastically changed. Day after day people have experimented with their social media buttons position, to get the highest possible shares and +1s or any other bookmarks. Following that, floating share buttons or floating social media buttons have became quite effective. Later on, mashable introduces a floating share button widget which is said to be transparent, and people loved that. So, here I have came up with fully transparent floating social share buttons widget. And in this tutorial, I will show you, How To Add Transparent floating Social Media Buttons to Blogger.Process:
- Log in to your logger account.
- Go to Design >> Page elements.
- Click on Add A Gadget; select HTML/Javascript.
- Paste the following code in the HTML gadget and click on Save.
You are all done. But, what if you want to add other buttons? After the 1st buzz button, you are free to add any buttons you want. Just simply put the button's script code into a dive code and paste it after any </div> code in the HTML of the widget. And then what?! Enjoy... :)
<!-- floating page sharers Start --><style type="text/css">#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left;background:transparent;padding:0 0 2px 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_top, .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 s-tofus.blogspot.com"><div class='sbutton' id='fb'><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></div><div class='sbutton' id='rt'><script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script></div><div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div><div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div><div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div align='center'><a href='http://s-tofus.blogspot.com/2011/10/how-to-add-transparent-floating-social.html'>Get This</a></div>
<!-- floating page sharers End --></div>
If you face any kind of problems with adding transparent floating social media buttons to blogger blog, just leave a comment.