Awesome Social Bookmarking Widget with Cool

These days I am focusing on Social Bookmarking Widgets for Blogger users. I have shared many Social Bookmarking gadgets this week like Floating Social Bookmarking Slide Out Widget for Blogger and a Social Bookmarking Bar which our readers rate very high. Thanks guys for encouraging me. By the way after two successful social bookmarking widgets here is another stylish and cool Social Bookmarking Gadget For Blogger
. If you are a newbie then have a look at below quote if you don't know much about social bookmarking gadgets.

Social bookmarking gadget is very important for your blog. But remember Social bookmarking gadgets can be only useful when you have some quality content because without quality content your bookmarking gadget is useless.When someone likes your posts or article he/she will bookmark it to his social media through your gadget and all of his friends will see the link of your article so in that kind of way your blog gets heavy traffic.

 So, Lets talk about today's dashing widget. Today's widget is an Awesome Social Bookmarking with Hover Effect. 

Why To Use Awesome Social Bookmarking Widget with Cool Hover Effect ?

 This Bookmarking widget contains many social media buttons like Twitter, Facebook, StumbleUpon, Digg and many more. It uses sharp images and also contains Add to any Button which allows you to share to almost every social media platform. The main feature that makes this widget Cool is the hover effect because CSS3 has give this widget an extraordinary speed.

How To Add Awesome Social Bookmarking Widget with Cool Hover Effect in Blogger

Just follow the following steps to add this widget in Blogger.

1. Go to Blogger Dashboard >> Template >> Edit HTML.

2. Tick on expand widget.

3. Search for ]]></b:skin> and paste the following code just above it.

#bloggiks-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#bloggiks-share ul li {display: inline;background:none;margin:0;padding:0;}
#bloggiks-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHDkEYgotvOzVd9rFGryO-lGtev2WGJbgl_Xm2A8yJMbPVGP2tbfOFjQuFTKydK85NVwe5lILXkKvPvxFaQGMOOa5e2dISDM2k97sb5uQir7X0Rfz0M9qgOALTPQGdzet2A7p1TmkN8Xa/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#bloggiks-share ul li a.twitter    {background-position: -0px -0px;   }
#bloggiks-share ul li a.twitter:hover {background-position: -0px -33px;  }
#bloggiks-share ul li a.facebook   {background-position: -32px -0px;  }
#bloggiks-share ul li a.facebook:hover {background-position: -32px -33px; }
#bloggiks-share ul li a.stumbleupon  {background-position: -64px -0px;  }
#bloggiks-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#bloggiks-share ul li a.digg    {background-position: -192px -0px; }
#bloggiks-share ul li a.digg:hover  {background-position: -192px -33px;}
#bloggiks-share ul li a.reddit   {background-position: -160px -0px; }
#bloggiks-share ul li a.reddit:hover  {background-position: -160px -33px;}
#bloggiks-share ul li a.google   {background-position: -128px -0px; }
#bloggiks-share ul li a.google:hover  {background-position: -128px -33px;}
#bloggiks-share ul li a.del-icio-us  {background-position: -480px -0px; }
#bloggiks-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#bloggiks-share ul li a.mixx    {background-position: -96px -0px;  }
#bloggiks-share ul li a.mixx:hover  {background-position: -96px -33px; }
#bloggiks-share ul li a.technorati  {background-position: -416px -0px; }
#bloggiks-share ul li a.technorati:hover {background-position: -416px -33px;}
#bloggiks-share ul li a.linkin   {background-position: -256px -0px; }
#bloggiks-share ul li a.linkin:hover  {background-position: -256px -33px;}
#bloggiks-share ul li a.yahoobuzz  {background-position: -448px -0px; }
#bloggiks-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#bloggiks-share ul li a.myspace   {background-position: -512px -0px; }
#bloggiks-share ul li a.myspace:hover {background-position: -512px -33px;}
#bloggiks-share ul li a.more    {background-position: -576px -0px; }
#bloggiks-share ul li a.more:hover  {background-position: -576px -33px;}

4. Now search for <data:post.body/> and paste the following code just below it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bloggiks-share'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>

5. Save your template.

Note : If you are using auto Read More Hack then search for the following codes and paste the above code below any of the codes.

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/> 

Get paid to share your links!