» » Floating Share Button For Blogger

Floating Share Button For Blogger

Share buttons are very popular among the bloggers, and with the popularity the presentation of the share buttons has really changed alot. Now in this post, I'll teach you how to create an Floating Share Buttons for your blog.



Floating share buttons has now been very popular as it is preferred by many big site like Mashable. As these buttons are very good looking and effective on attracting readers to share buttons, these buttons have been in demand for long.

So regarding that I've written this post to teach you how to add it to your blog. Just follow these steps:

Now open 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://templates-widgets.blogspot.com/2011/03/floating-share-button-for-blogger.html>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


UPDATE 


Adding Floating share Button In sidebar for Blogger


1. Login to blogger account.

2. Go to design --> page Elements






3. Click Add A Gadget.

4. In Add A Gadget window, choose HTML/Javascript .
5. Copy the code below and paste it inside the content box.

<style>
#sharebar {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;right:0;}
#sharebar .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;-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>
<div id="sharebar">
<a href="http://templates-widgets.blogspot.com/2011/03/floating-share-button-for-blogger.html">Source</a>

<div class="sbutton" id="fb">
<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">
</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">
<script src="http://widgets.digg.com/buttons.js" type="text/javascript">
</script>
<a class="DiggThisButton DiggMedium" href=""></a>
</div>
<div class="sbutton" id="gb">
<a class="google-buzz-button" data-button-style="normal-count" 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">
</script>
</a>

</div>
</div>
</div>

6. Save the gadget.
7. Click Save button on upper right corner.

If you like this post. Share it. Enjoy!

Related Posts