Best Share Buttons Widget on Blogger| Tips.
Today again i want to show you guys about my new discovery of best side Share Buttons Widget and also there is Below Posts Share Button Widget | Tips., which me too am using on my blog. It suits any blog layout design or colour. As you all know Integrating share buttons widget on your blog is a great way to get free traffic and promoting your brand from social bookmarking website such as Twitter, Facebook, Google Plus, Digg and others. Share buttons make it easier for your blog readers and visitors to share posts they find interesting on your blog on social book marking site which will in turn increase your social engagement and page views.
Today, I want to teach you how to add a floating sharing widget for blogger blogs. This floating sharing gadget contains the best social buttons like Facebook Share/Like, Google +1 and Twitter button. This widget has been tested to be compatible with all major browsers. An example of this widget is at the left side of my blog post.
How To Add Floating Share Buttons On The Sidebar Of Blogger Blog.
1. Log in to your blogger account and click on Design
2. Click on Add A Gadget on the sidebar.
3. Select HTML/Java Script
4. Paste the code below into the box and save.
<style type="text/css">
#social-buttons {
position:fixed;
bottom:15%;
margin-left:-721px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get this from dohhnutt1ghost.blogspot.com">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='Helplogger' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://dohhnutt1ghost.blogspot.com/">widget</a></div></div></div>
Customization
The widget is align to any side or default at left side, so if you wish to move it towards the right side or you want to shift it more to the left side, locate margin-left:-70px; in the code above and decrease the numeric value to move it to the right and increase the numeric value to shift it more to the left side.
Comment below for any challenge.
