Social Bookmarking Buttons With Spinning Effect for Blogger

Till now many social bookmarking widgets has been released for Blogger. Simply, social bookmarking buttons and icons helps you to make your blog socialize and get more traffic. Adding social bookmarking buttons is cool way to get more readers and targeted audience.

Before using social bookmarking option, you must be aware of icons design how much clickable is it. Your readers are likely to click social bookmarking button containing in your blog if they find the buttons really cool. If you haven't such buttons, so here is something special for you.

Social bookmarking buttons with spinning hover effect. Buttons are cool itself and when your reader hover the mouse over it, it spins a round.

Check the demo yourself!

Here is how to add these cool buttons to your Blogger blog:

Login to Blogger > Design > Edit HTML > Expand widget templates. Find the following code in your template:

<data:post.body/>

Just below that add the following group of codes:

<b:if cond='data:blog.pageType == "item"'>
<div class='spinning_icons'>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'>Delicious</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/hacktutors' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>

Replace hacktutors with your feedburner username. Again, find the following code:

]]></b:skin>

Just above that code, past the following:

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url('http://4.bp.blogspot.com/-KxcARTmAlQI/TwCDycGOXVI/AAAAAAAABis/rBrMzmoyN6c/s1600/twitter_32.png'); }
.delicious{ background:url('http://4.bp.blogspot.com/-82J7zeYp1s8/TwCEN_HoAhI/AAAAAAAABkQ/t1wtld8lNA4/s1600/delicious_32.png'); }
.digg{ background:url('http://1.bp.blogspot.com/-MtS4dU0fY4A/TwCENEQUQvI/AAAAAAAABkE/glAaVSTKJDM/s1600/digg_32.png'); }
.facebook{ background:url('http://4.bp.blogspot.com/-Sxhuf0CW8OY/TwCEMpoaq0I/AAAAAAAABkA/PfhoKDMBcBQ/s1600/facebook_32.png'); }
.rss{ background:url('http://4.bp.blogspot.com/-Q5bYfx3dD2g/TwCEKQfYMQI/AAAAAAAABjw/XrXOvdFeZZs/s1600/rss_32.png'); }
.stumbleupon{ background:url('http://3.bp.blogspot.com/-hwn17i1SLNU/TwCEJNfyIWI/AAAAAAAABjo/TBb8oc2KHGs/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

Now save the template and your are done! Have a look at your cool new bookmarking button that appears at the bottom of your post.

Thanks to Paulund for this cool CSS3 bookmarking button spinning effect.

Tweet