• Tutorials
  • Blogger Themes
  • Blogger SEO
  • Blogger Widgets
  • Internet
  • Mobile Phones
  • Gadgets
BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
  • Home
  • Blogger
  • SEO
  • Themes
  • Internet
  • Widgets
  • Gadgets
  • About
  • search
    close

How To Add Pop Out Social Bookmarking Widget With Smooth Jquery Hover Effect

 Rohitkumar  23:03  Leave a Comment
Tweet
How To Add Pop Out Social Bookmarking Widget With Smooth Jquery Hover Effect
Now a days Blogism is going more powerful with Social Bookmarkings. Facebook, Twitter, Stumble Upon, Digg, Tumbler are famous for getting high quantity visitors and for better blogger SEO.

This is the tutorial about adding the Pop Out Social Share Widget for Blogger.

What's Special in this Widget ?

The widget itself is fabulas creation with custom Jquery Hover Effect.
We have added Facebook like, Google+ , Stumble Upon, Digg Submits and Twitter Tweet.
You will not get the beautiful presense of this widget until you try it.

Installing the Widget for Blogger

1. Go to Blogger > Template > Edit HTML.
2. Find this code </head>
3. Paste the following code just above it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
4. Now click Save and go to Layout > Add Gadget > Select HTML/Java Script
5. Copy paste the following Code.
<script type="text/javascript">
/*<![CDATA[*/
jQueryundefineddocument).readyundefinedfunctionundefined) {jQueryundefined".btntslidebox").hoverundefinedfunctionundefined) {jQueryundefinedthis).stopundefined).animateundefined{left: "0"}, "medium");}, functionundefined) {jQueryundefinedthis).stopundefined).animateundefined{left: "-70"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.btntslidebox{    background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrgl_odAKZZB_O6JnZTrwTNcpNIfOV8eNkHS_4-JuhXa17nWicwz2R72vvl_4nR8GeYcreGt-rs1m5R1sgHI2dWgKqHzlz_JaBbZxb9U1Fpg6zQ61pm7ccAGV2PwUQChzdeKwhbVXHUc/s1600/tab_left_vertical.png") no-repeat scroll right top transparent !important;    display: block;    float: left;    height: auto;    padding: 0 40px 0 5px;    width: 65px;    z-index: 99999;    position:fixed;    left:-70px;    top:20%;}
.btntslidebox 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="btntslidebox" 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"> undefinedfunctionundefined) { var s = document.createElementundefined'SCRIPT'), s1 = document.getElementsByTagNameundefined'SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBeforeundefineds, s1); })undefined); </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://techethix.blogspot.com/2013/07/pop-out-share-widget-blogger.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get This</span></a> </div>
</div>
</div>
</div>
6. Click Save. Its Done now go to your blog and check this awesome social bookmarking widget.

Note : Please don't edit widget's Script otherwise nothing will work.

Want More Tricks ? Check TechEthix

Don't forget to add our Blogger Badge to your Blog/Site and If you like this post kindly share it within 3 secs !

    Sharing is Caring!

  • Facebook
  • Twitter
  • Google+
  • StumbleUpon
  • linkedIn
  • StumbleUpon

Rohitkumar A

Posted In blogger, widget
Subscribe Now

Get Latest Posts Directly Into You Inbox

0 comments:

Post a Comment

Newer Post Older Post Home
Do you like my work?

Buy Me a Coffee!

Popular Posts

  • MaterialMix : A Free Material Design Blogger Template
  • How to add Custom Fonts in Blogger or Any Website
  • How to use full ISP bandwidth to speed up downloading
  • Download Materiality Blogger Template
  • Resume Lite - One Page Resume Blogger Template
  • Best Social Media Widget for Blogger | 2017
Email Newsletter

Get Latest Posts Directly Into You Inbox

Labels

Android blogger browser Buy computer css drop down menu Gadgets Google how to internet Laptops Mobile Phone phone responsive reviews SEO smartphone Social Media Social Share Widgets subscription box Template tool trick widget Wireless youtube
Powered by Blogger.

Popular Posts

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • Materiality - Material Design Blogger Template
  • BloggerHero Free Premium Blogger Template
  • MaterialMix : A Free Material Design Blogger Template
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger

Contact Form

Name

Email *

Message *

  • Home
  • About
  • Contact
  • Sitemap
  • Services
  • Request
  • Privacy Polciy

© 2013 BloggerHero.com. All Rights Reserved. Designed with Love for Everyone!