Floating Vertical Social Sharing Bar for Blogger

floating-vertical-sharing-bar-for-blogger

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>
       
You can customize the position of the widget on your page by change the highlighted values. Need any help? Comment below to ask us.

Labels: ,