Social Bookmarking Gadget with Spinning Effect for Blogger


Social Bookmarking Gadget with Spinning Effect for Blogger

This Week is the week of widgets for our readers as we posted many widgets in last few days like Awesome Subscriber icon widget  and christmas social bookmarking gadget .

Now as I promised that I will share unique and fancy widgets for blogger. So today I have come with Social Bookmarking Gadget with Spinning Effect for Blogger. This widget helps you to socialize your blog to get more traffic. Adding this widget is good way to drive more traffic and increase audience .

Social Bookmarking Gadget is a cool widget when a visitor hover the mouse over it. It spins a round. This will give visitor a professional look of your Blog

Social Bookmarking Gadget with Spinning Effect for Blogger

How to Social Bookmarking Gadget with Spinning Effect for Blogger

1. Go to Blogger dashboard >> Template >> Edit HTML >> Proceed.

2. Check the expand widget box.

3. Find <data:post.body/> in your template and paste the following code just below it.

<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/bloggiks' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>

4.  Replace Bloggiks with  your feed burner.

5. Now find  ]]></b:skin> and just above paste the following code.

.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('https://lh5.googleusercontent.com/-R5PEgKJg_nY/UNnkXNzjkzI/AAAAAAAAB2U/-5WeFWpC_hc/h120/twitter.png'); }
.delicious{ background:url('https://lh6.googleusercontent.com/-JirPXEIDkUs/UNnlL14BhJI/AAAAAAAAB20/tj3h8wbQ4mo/h120/delicious_256.png'); }
.digg{ background:url('https://lh4.googleusercontent.com/-EcvW56cIJ74/UNnks8ErqMI/AAAAAAAAB2s/BZIkmWm_lFU/h120/digg.png'); }
.facebook{ background:url('https://lh3.googleusercontent.com/-fBFygi6lzmA/UNnkE3h6ebI/AAAAAAAAB2M/56KwKTSzqCw/h120/facebook500.png'); }
.rss{ background:url('https://lh5.googleusercontent.com/-jkurbt3oAas/UNnkYnmRGEI/AAAAAAAAB2Y/Jvx5wucg0ew/h120/rss.png'); }
.stumbleupon{ background:url('https://lh5.googleusercontent.com/-sJKGLiBvucc/UNnkaX0Gk3I/AAAAAAAAB2k/O2xJxJQn8gY/h120/stumbleupon.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;
}

6. Now save your template and that's all. The widget will appear at the bottom of your posts.

Last Words

Stay tuned we will be back with more Cool widgets. Subscribe to us to get free email updates directly in your inbox. If you need any assistance the let us know and do share your views with us Keep Blogging.

Get free daily email updates!

Follow us!


About Author:

Waleed is a certified SEO Consultant, Pro Blogger and an addicted Web Developer

read more...

Follow him @ Bloggiks |Mobi2Android | Facebook | Google Plus

1 comment:

  1. interesting article.....article like this will help newbies like me in the beginning..... At the same time we expect more and more topics with huge informations,tips, tricksin the future…. Make Money , Blogging Tips

    ReplyDelete

 

About Me

My Photo

A Pro Blogger
Waleed khan is a young Blogger and Web Security Consultant.He is a SEO Consultant & Web Developer.

Alexa/PR

Recent Post

Recent Comments

Powered by:

Bloggiks © 2012. All Rights Reserved | Contact | About | Discliamer