11 December 2011
Add Floating Share Buttons To Your Blogger Sidebar
You must have seen in many wordpress blogs including Mashable that they use floating share buttons. Now it's time for Blogger to add a floating share buttons widget. In this tutorial I will tell you the method that can be used to implement this widget to Blogger. It will appear outside of your post sections and as you scroll the page, this widget will also scroll with some animation effects.
I have included Tweet, Stumbleupon, Google +1 (Plus one) and Facebook buttons in the bar. Each of them comes with a live counter and hover rollover effects.
Live Demo
Step 1. How To Add Floating Share Buttons To Blogger
1. Go to Blogger > Design > Page Element
2. Click Add a Gadget
3. Copy the Code and Paste it inside the content box.
<!-- floating share bar Start blogger4ever.com-->4. Save the Gadget.
<style type="text/css">
#pageshare {
float:left;
margin-left:-80px;
background: #fafafa;
position:fixed;
bottom:20%;
border:1px solid #e5e5e5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#pageshare:hover {
background-color:#ffffff;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,.1);-moz-box-shadow:0px 2px 2px rgba(0,0,0,.1);box-shadow:0px 2px 2px rgba(0,0,0,.1);}
#pageshare .sbutton {
float:left;clear:both;margin:5px 5px 0 5px;}</style>
<div id='pageshare' title="Get this Widget from Blogger4ever.com">
<div class='sbutton' id='tweet'>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="YOUR USERNAME">Tweet</a> </div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone> </div>
<div class='sbutton' id='fbshare'>
<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="true" data-layout="box_count" data-width="50" data-show-faces="false"></div></div>
<div style="clear: both;font-size: 10px;text-align:center;"><a href="http://www.blogger4ever.com/">Get Widget</a></div><!-- Do not remove this link --> </div>
<!-- floating share bar End -->
Step 2. Drag The Gadget and Reposition it
1. Drag the Gadget and Reposition it under the Blog Post Gadget.
2. Click Save Button (Top right hand corner).
That's it, Enjoy!
Add Social Media Share Count Buttons Below Post Title Blogspot
Add Floating Facebook Likebox To Your Blogger Blogspot
About Author
Ahmed Shehzad Hi, I am the Founder and Editor of Blogger4ever, I loves writing about Blogger Tricks and Tips, Blogger Tutorials, Hacks and Widgets and everything about Blogger.... Follow me on Google+
Subscribe to:
Post Comments (Atom)
0 Responses to “Add Floating Share Buttons To Your Blogger Sidebar”
Post a Comment