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.

One Response

  1. Maaste Blogerrmen February 20, 2014

Leave a Reply

Your email address will not be published. Required fields are marked *