Tuesday, 11 June 2013

Avesome Social Bookmarking Widget With Mouse Hover Effect For Blogger

Hi all again today in my 12th post I will tell you how to add Avesome Social Bookmarking Widget With Mouse Hover Effect To Blogger.
This is an social widget. It is developed by the use HTML And J Query. It is an attractive widget with an Share button when you hover on the share button Five (5) more buttons will appear

  1. Facebook Like Button
  2. +1 ing Button
  3. Stumble Upon Submit Button
  4. Digg Button
  5. Tweet Button
I recommend you to add this because I am also using it because this widget is very attractive , beautiful and mostly colorful which makes your blog/site colorful and beautiful.









Live Demo On The Left




Lets Add It


First Add The jQuery Plugin


  1. Go to Blogger >> Template >> Edit HTML
  2. Click On Code To Activate It
  3. Find the code given below (tip: Press CTRL+F to find)
  4. </head>
  5. Now Add the Below code just above it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Now Find Below Code 

<head>

  1. Now Add the Below code just Below it
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Now Go To


  1. Go to Blogger >> Layout >> Add a Gadget
  2. Select HTML/Java Script
  3. Don't Give Any Title To Gadget
  4. Add the Code Below

<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("http://3.bp.blogspot.com/-Dbq2keEcGbs/T7seLQzzy8I/AAAAAAAAByY/6olpRUktfhE/s1600/www.cloudspedia.blogspot.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://goo.gl/M1XMC" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div> </div></div>


Now Save It .

You Have Done ! ! !





← Blogger OR Google+ →

3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Avesome Post

    http://www.helpnewbloggers.me/

    ReplyDelete
  3. Avesome Post

    http://www.helpnewbloggers.me/

    ReplyDelete

  • Home
  • About Us
  • Contact Us
  • Sitemap
  • Back To Top ^

    About us

    Shiraz Shakeel is a young boy who is founder and the owner of Cloudspedia. He is 13 years old and living in Pakistan, K.P.K, Peshawar. Now a days, He is studying in 7th grade and running his site..... Continue Reading

    Global Ranking