Floating Smart Sharing Widget for Blogger Blogs

Recenty I have shifted to wordpress but when previously I was was using blogger or blogspot blog I always wanted to have the floating share button like found on Mashable. WordPress is having a plugin to add this smart sharing widget but in blogger we do not have this option,  so somehow I was able to create one for blogger blog. after adding the widget you will be able to have a Floating share button as I am having on my blog. Before doing this I recommend you to backup your blogger template.

Now open draft.blogger.com> go to Design>go to edit html page> Check Expand Widget Templates

now search for ” ]]></b:skin> “ and add the below mentioned code just above it, do not include ” while copying the code

”

position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth – offsetWidth);}

#float_corner {padding: 5px;
border-bottom: 1px solid #e8e8e8;

“

now save your template. now here is the second stage of adding the code. now search for “</body>” code in your template, and add the below mentioned code just above “</body>” code. Do not add ” while copying the code

”

<div id=’float_corner’>
<ul>

<script type=’text/javascript’>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script><a class=’DiggThisButton DiggMedium’/><br/>

<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’/><br/>

<a class=’google-buzz-button’ data-button-style=’normal-count’ data-locale=’en_IN’ href=’http://www.google.com/buzz/post’ title=’Post on Google Buzz’/>
<script src=’http://www.google.com/buzz/api/button.js’ type=’text/javascript’/><br/>

<script badgetype=’square’ src=’http://d.yimg.com/ds/badge2.js’ type=’text/javascript’>
ARTICLEURL
</script><br/>

<a href=’http://www.facebook.com/sharer.php’ name=’fb_share’ type=’box_count’>Share</a><script src=’http://static.ak.fbcdn.net/connect.php/js/FB.Share’ type=’text/javascript’/><br/>

<a href=’http://www.technotips.org/tips/floating-smart-sharing-widget-for-blogger-blogs/>Get This</a><br/>

</ul>
</div>

“

Now save your template and check out your blog. you can adjust the position of the widget by editing ” position:fixed;_position:absolute;bottom:0px;left:0px;clip: ” part of code.

You can change the following attributes : bottom :left
Change them to make the image appear were you like :

top left
top right
bottom left
bottom right