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 likeAwesome 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 

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

4.  Replace chsaqlain 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm11MyFzciLiFzv9AX_5xBj6zxlHaUkG0wCy2tXmw8LNYbYzVhejC4MqUCjjWdpFdw3uRrfFLRgsWQnQMQ5QA361selsuYB5nhBnR3iSENbJKhLRKHRCHN_47UqPA6q9oayCh0r5ZgtUOW/h120/twitter.png');}
.delicious{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzAGUGA_qcJfIYPyfiLktG6pvn7MGbeNY9jCyxBEDqPfQ2n-nzMLk4ZfIukRQfvoIXkIYLh2u6LJPinOjdbFBxPqpYAYAFfr3M6Vw02YGybhL71eFi9Y0tOrCYivNr9ix-ve3ivTOT_tK/h120/delicious_256.png');}
.digg{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtjzz9OcC70MQFyXY9rDxv3MOm2Xv_Lazpv_0fQmHQTEwkIPbWK6p_78_pIU0CayZopZyk2HfKTbPtS_Q4Ky5RjyVg62ODFqbXySTKEndgpGzozjgssre_7DZHbTWKw_T72JJtggFlEKp/h120/digg.png');}
.facebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGZbRcvQuFhbcjQ16tH977DShOTggj0Wdwcl7x0dq-3P3npZGFRgG0c7G7CfR8z_GAfA9sW8EnxGLdSvbkN74Z9u36xL_bWjm2jMLP2bdQBp82AQ70JWfE8fV7V9fcgibeyenvEX_hZIPn/h120/facebook500.png');}
.rss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-__ysm-p_yaCc-h3DHiddhZr9F4bIpdAG8zVF9kpegmrwJd06y8TYexQ_yYQF4F8iTZGoaryZTeayqCf2pCga7EeSVwfQOhcNb6QzOfjpXfFUT9wSIL-3wiIMELV8mAyExKulg5AU9fS/h120/rss.png');}
.stumbleupon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3NUSNK1AOmWAFIpjJeHzcYYRZLnuJrqtdccVmGZXiq6YSPk3DJWDmJrPMg5OEdt1TWqGePYJvdXIszAiTcYPPCoYDzlr27NPFh2H8NIocnomLcz225xT0ever5uwuxAow256EmST0kVK/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.

Get paid to share your links!