The Solution – Floating Sharebar for Blogger
A floating sharebar always stays at the left (or right side, depending on how you coded it) and so is easy for the users to click on. It also doesn’t make your blog look cluttered, but gives a clean feel.
Here is the code.<!-- FLOATING SHAREBAR //-->
<style>
#Namanyay-Sharebar {
position: fixed;
top: 30%;
right:95%;
background-color:white;
padding:5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border:1px solid #ccc;
}
#Namanyay-Sharebar .fb {
margin-left:5px;
}
</style>
<div id='Namanyay-Sharebar'>
<center>
<!-- Floating sharebar for Blogger by Namanyay Goel http://create-n.blogspot.com/ /-->
<a class='twitter-share-button' data-count='none' data-via='Imrockinboy' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<br/>
<br/>
<div class='fb'>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='trebuchet' layout='box_count' send='false' show_faces='false'/>
</div>
<br/>
<g:plusone size='tall'/>
<br/>
<br/>
<su:badge layout='5'/>
<br/>
<br/>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style ' style='margin-left:5px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-4f00184e4a453716' type='text/javascript'/>
<!-- AddThis Button END -->
<br/>
<a href='http://feeds.feedburner.com/Create-n'><img height='48px' src='https://lh6.googleusercontent.com/-B412gEouDvM/TvyImCWVLKI/AAAAAAAAAhA/dnmHpTKmhE4/h120/RSS-Button.jpg' width='48px'/></a>
<br/>
<br />
<a href='http://create-n.blogspot.com/'>Get This!</a>
</center>
</div>
<!-- FLOATING SHAREBAR END //-->
How To Use it?
Just place the above code in a HTML widget, and you’re good to go! Alternatively, search for
and paste it before/after that.
Customize it!
To place it on the right. Find “right:95%; ” (Press CTRL+F) and then replace right with left or change the value (tip:you can also use a negative value example -50% etc)
Change Background Color. Find “background-color:white;” and change white with any other color. (Tip: You can use Hex Codes as well too!)