Add Floating Vertical Social Sharing Bar to Your Blogger Blog
Floating social widgets are great as they remain sticky at a corner and always remain visible to your visitors and maximize the social sharing of your content. They not only give you a good SEO, but refers traffic also. If you don't have a floating social sharing bar on your blog yet, then follow below simple and easy steps to add a vertical floating social sharing bar with counters to your Blogger blog.
How to Add This Bar to Your Blogger Blog
1. Login to your Blogger dashboard and select your blog to which you are willing to add vertical floating social sharing bar
2. Go to layout of your blog
3. Add a new gadget as HTML/Java Script
4. Paste the below code in it and save your gadget. You are all done!!
<style>
#floatingbuttons{background:#aaa;background:-webkit-gradient(linear,
left top, left bottom, color-stop(0, #f2f2f2), color-stop(1,
#aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px solid
#808080;float:left;padding:0 0 3px 0;position:fixed;bottom:0%;right:0%;z-index:10;border-radius:0
5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);}
#floatingbuttons
.floatbutton{float:left;clear:both;margin:5px 4px 0 4px;}
.addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a
span.getfloat, .addbuttons a
span.sharebuttons{color:#fff;background:none;font-family:arial,
sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;}
.addbuttons a:hover
span{color:#fff;background:none;text-decoration:underline;}
</style>
<br />
<div id='floatingbuttons' title="Share this
post!">
<script
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript"> (function() { var s =
document.createElement('SCRIPT'), s1 =
document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async
= true; s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1); })(); </script>
<!-- Medium Button -->
<script src='http://platform.twitter.com/widgets.js'
type="text/javascript"></script>
<div class='floatbutton' id='facebook'>
<fb:like layout="box_count" show_faces="false"
font=""></fb:like>
</div>
<div class='floatbutton' id='google+1'>
<script type="text/javascript"
src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'}
</script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share"
class="twitter-share-button" data-count="vertical" >Tweet</a>
</div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript"
src="http://platform.linkedin.com/in.js"></script>
<script type="in/share"
data-counter="top"></script>
</div>
</div>