BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

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

Leave a Comment

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"http://4.bp.blogspot.com/-q4SqFaTkiTs/TyO_7WhbQYI/AAAAAAAAAjE/n6UDCpWQ3Wo/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 !

0 comments :

Post a Comment

Powered by Blogger.