Social Bookmarking Buttons With Spinning Effect for Blogger

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.

26 comments :

  1. this will sure help me, thanks for sharing, appreciate the hard work

    ReplyDelete
  2. When i click the demo page, it says service is unavailable.

    ReplyDelete
  3. @Hacker News:

    The demo page is working fine for me..

    ReplyDelete
  4. Thanx Alot its working for me thank u

    ReplyDelete
  5. I want to write for you Anup. How i can get started?

    ReplyDelete
    Replies
    1. Kindly invite me to your blog. Because I want to write more than 1 articles. And how many backlinks you allow for each articles?

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Anup i also want to write for your blog but i have a pr4 blog

      Delete
    4. Ammar,

      I have added you as the author and waiting for your approval.

      Abdulsalam,

      You can submit your article type (what you are willing to post about) and then I'll send you the further information.

      Thanks!

      Delete
  6. That is cool, nice effect on icons.

    ReplyDelete
  7. I already created a button however adding spinning effects looks impossible for me in precious times however not you makes it possible for me.

    ReplyDelete
  8. I use digg and delicous but always loading.

    ReplyDelete
  9. Nice one over there.....u are the best

    ReplyDelete
  10. Really cool spinning effect, I love stuff like this, makes a blog look more cutting edge.

    ReplyDelete
  11. These social bookmarking widgets are really good! the spinning effect could possibly improve click through rate..I'll try it out! Thanks for sharing!

    ReplyDelete
  12. I already made a button all the same adding up spinning effects looks hopeless for me

    ReplyDelete
  13. nice gadget to add on blog and grab attention

    ReplyDelete
  14. Can you please share the same sort of buttons for wordpress, its very cool.

    ReplyDelete
  15. Thanks for sharing. Social bookmarking widgets are good. It simply drive traffic to our site. Sure will try out this demo. Thanks once again.

    ReplyDelete
  16. Social bookmarking buttons with spinning hover effect. Buttons are cool itself and when your reader hover the mouse over it, it spins a round.So if you want to add it in your blog just follow below simple steps and you are done.
    First of all see a demo of Social Bookmarking Buttons With Spinning Effect

    ReplyDelete
  17. You are doing great job. Because most of people don't know the value of social bookmarking and their buttons. It helps to increase the directly interaction with people. Thanks for the sharing your knowledge on SMO.

    Thanks

    Apps Promotion

    ReplyDelete
  18. Will give this a try at my blog section under my name signature link.

    ReplyDelete

Don't spam.

 

We are hosted by...

Hosted by HostGator

© Copyright 2011 Hack Tutors All Rights Reserved
Designed by Anup Kayastha