Home » Design » Add Floating Share Buttons Widget On Your Blogger Blog

May 6, 2010

Add Floating Share Buttons Widget On Your Blogger Blog

Design Add Comment
Floating Share Buttons Widget
The first time I saw the floating share buttons widget is in Mashable, and this widget can make bloggers get maximum exposure of their content, because this widget will always follows the visitor by scrolling as the visitor scrolls the page. Here I present you one more of my collection, a social bookmarking widget for blogger with floating function. , You can see it in the left of my page, and you can also customize it as you like.

How To Add?

1. Log into your dashboard. Click on "Layout", if you are using Blogger Draft it's changed to "Design" and then on Edit html.


2. Now find this code ]]></b:skin>

3. Place the below code, above ]]></b:skin>" :

1 #floating-share {
2 position:fixed;
3 border:#fff solid 1px;
4 padding-bottom:2px;
5 }
6

4. Now find <body> and put this code below it:
1 <div id='floating-share'><li><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'></a>
2 <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script></li><li><a class='DiggThisButton DiggMedium'></a></li><li><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'></script></li>
3 </div>
4

The above code contains  Google Buzz, Digg, and StumbleUpon buttons, feel free to add any button you like.

5. Save your template.

Tip: If you want to hide the widget from the home page put the code from step 4 between
<b:if cond='data:blog.pageType == "item"'> And </b:if>

Then You Are Done

Socialnomics: How Social Media Transforms the Way We Live and Do Business