Social Bookmarking are very essential now a days everybody share post to help other people in boosting their websites and also share their abilities copy url then paste it is very old. Thats why you may found social bookmarking gadgets almost on every blog/website.Today we are sharing a cool social bookmarking gadget designed by Chandeep and 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.It's very easy way to share everything.
How to Add Slide Out Flying jQuery Bookmarking Gadget To Blogger ?
Let's divide this in three steps in order for better understanding.
Step 1 : Adding jQuery Plugin ( just include the script ).
Step 2 : Adding Google +1 Button (Script provided by Google Plus).
Step 3 : Adding the Gadget
Step 1 : Adding jQuery Plugin
Note - Ignore this step,if you have already added jQuery plugin to your blog. Just find the code if already exist then don't do this step.
Add this code just above </head> tag.
- Go to Blogger Dashboard > Template
- Click Edit HTML
- Hit Proceed
Now find below code in your template
</head>
Add this code just above </head> tag.
<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
Find below code in your template<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/AVvXsEgqTUu4GqSkIBTE6BxRJ4473aeQkq-Iqvh-Mf8yz9caotGQb6DVw2k4Ib4qrWx1Pu8iTM1e2jrzV1fmrZ7K8XaHJNub8emw6Cxy9B6ZWLl34j93Hma0RuSG2-kqRDaA9dQaz5Q0at1aaM8/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.helperblogger.com/" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div> </div> </div>
</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.helperblogger.com/" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div> </div> </div>
Hope all of you will like this gadget. If any question or queries kindly comment or send email using contact page. Found any bug then comments.
0 comments:
Post a Comment