Hidden Floating Share Buttons Bar For blogger ~ Blogger TrickZz

Floating Share buttons have become very common these days.So i decided to add some TricksZz to it .So it turned out to be a hidden floating share buttons bar .Its so awesome that visitors wont be able to resist themselves from using this widget and will help you promote your blog .

Live Demo

How To Add Slide Out Bookmarking Gadget To Blogger?

For better understanding I am dividing this tutorial in 3 simple steps,just follow them carefully and you will add this gadget very easily to your blog.

Step 1 : Adding jQuery Plugin
Step 2 : Adding Google +1 Button Script
Step 3 : Adding the Gadget

Step 1 : Adding jQuery Plugin

Note - Ignore this step,if you have already added jQuery plugin to your blog.

Go to Blogger Dashboard > Template
Click Edit HTML
Hit Proceed
Now find below code in your template

</head>

add below code just above it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Step 2 : Adding Google +1 Button Script

Find below code in your temlate

<head>

add below code just below of above code

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

Step 3 : Adding the Gadget

Now go to Page Layout
Click on Add a Gadget
Select HTML/JavaScript
Leave title field blank
Paste below code and save it
Drag the widget to bottom of your page.
Finally save your changes

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function () {
jQuery(".hbslidebox").hover(function () {
jQuery(this).stop().animate({
left: "0"
}, "medium");
}, function () {
jQuery(this).stop().animate({
left: "-70"
}, "medium");
}, 500);
});
/*]]>*/
</script>
<style type="text/css">
.hbslidebox {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfDBvKS8eoN2ch12cBqcd1syIhz9UFLBGrrjvvB3UYYDwmcNMHhycDsC4Jz_nO3nY1YVVPTZOMRO_L_ZVyfb6cdLWL1dQwFdMMNL6RncvAJ4r71uWuRSpixdQZKhlyM_7mRL8ZGVWqGf4/s1600/helperblogger.com-tab_left_vertical.png") no-repeat scroll right top transparent !important;
display: block;
float: left;
height: auto;
padding: 0 45px 0 0px;
width: 65px;
z-index: 99999;
position:fixed;
left:-70px;
top:20%;
}
.hbslidebox div {
border:none;
position:relative;
display:block;
}
#floatingbuttons {
background: #fff;
border-radius: 5px 5px 5px 5px;
border: 1px solid #CCCCCC;
float:left;
padding:0 0 3px 0;
bottom:15%;
z-index:399;
}
#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:#000;
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>
<div class="hbslidebox" style="">
<div>
<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>

<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'>
<g:plusone size="tall"></g:plusone>
</div>
<div class='floatbutton' id='stumbleupon'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='floatbutton' id='digg'>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
</div>
<div class="addbuttons">
<a href="http://www.bloggertrickszz.blogspot.com/" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a>
</div>
</div>
</div>
</div>

I hope you liked this rare widget ; than those usual boring floating share buttons. I will be soon be writing an article on the usual share buttons. So be in touch with me and my blog .

Follow @shipsocker

Stay Connected With Free Updates

Subscribe via Email

Thursday, 24 May 2012