BannerFans.com

Slide Out Social Bookmarking Gadget With jQuery For Blogger

2:27 PM | , , , , , , ,

Become a guest author on Create the Blogger.

 Social Bookmarking Gadgets plays important role in boosting blog traffic.Thats why you may found social bookmarking gadgets almost on every blog/website.Today we are sharing a cool social bookmarking gadget which works with jQuery.This gadget scrolls along with page and when any user hovers on icon,some social bookmarking buttons like facebook like button,twitter tweet button,stumbleupon submit button and digg's digg it button.Also the installation of this gadget is damn easy,now lets see how to add it to blogger blog.

 How to add Slide Out Social Bookmarking Gadget With jQuery For 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.

Step 1. In Your Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Tick The Expand Widget Templates Box

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<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

Step 1. In Your Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Tick The Expand Widget Templates Box 

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

<head>

Step 3. Copy and Paste the following code Directly After / Below <head> 

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

Step 3 : Adding the Gadget

Step 1. On Blogger you add the gadget to a HTML/Javascript gadget by going to Layout > Add A Gadget > Choose HTML/Javascript (Leave title field blank) and paste in the code:

<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/AVvXsEhkUMZKbv8dcBBvc5RJOX5abdaf7G4Z1cqBHwiryDYMPF2ZYtRrmQrA4caE55NjyiftWNoZztgFFx8JozFB6TAl420hKrq0PQAOI8DoLdAjpVtpuSpaPBlgEd4g-3AxrLT4HnP_X6p2N-A/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> <!-- 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'> <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.createtheblogger.blogspot.com/" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div> </div> 
</div>

Step 2. Save HTML/Javascript. 

How easy was that ? Make sure to check out more of our Blogger Tips, Blogger Gadgets and Social Bookmarking Gadgets.

Drop Your Comments Below.

1 comment:

Anonymous said... For Bloggers

Wow, superb weblog layout! How long have you ever been blogging for?you made blogging glance easy. The whole look of your website is wonderful, as well as the content material!
website design

November 21, 2013 at 10:48 PM

Best Blogger Tips

To Use A Smiley In Your Comment, Simply Add The Characters Beside Your Choosen Smiley To The Comment:
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) Grab Smily Gadget

Post a Comment

IconIconIconIconFollow Me on PinterestYouTube
 
Gadgets By For Bloggers