Monday, July 23, 2012

Social Sharing Buttons With Spinning Hover Effect For Blogger

This is also Nice social Bookmark buttons.
You can add this buttons to end of the post
Its have nice hover style.Earlier i posted
another spinning hover effect buttons.
Social Network Widget With Spinning
Hover Effect For Blogger
. Follow These
steps.
DEMO

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Add check mark in Expand Widget Templates.

3. Find this tag by using Ctrl+F   ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

.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;
}

.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;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoHlxXwFS5sH2DzERrvRW7KEwcDzACVJovbQX41lkzVwdgUYT_Op8sW5_Er79uFFbVhsgOKKJE1Xc5Z6pIcfMOx5Q-qthfDuF4JOasKBYez4L1vDb8mSiLR8Al3YsxxHlXCg51HQKJbR8/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdlohz3EcfyFswiEvBZV07uxwlJVkWAAYAVJ4JjpR1CPjwQxMLfE_tSvXQlH6YRCbg_iDYi_uYgmJRdoUmLQ6jSbKsW8HvmNwlWSW4x0wnDRZH2QQ6l0szPuPmgvPYSKvd3bWnQJBl3bI/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLATdOAr3WaCfP-SIm7jixIASNAzMGe4qoNjHE9oz9YcXoge7YhyS-WcCXRScseR9c6N8TaFnKASr_jwpwzKxc-WZr_qV7Uo9L4QOi3KSZ5Jrgqs-DY1aHpNqTHgBiDfIUvI8fBWZYoJw/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG-AyOscmb3nHYIuDzhMWZjcXZg6qdMIqHesaKewsp1O0HJhsRyjpIJtEQS2spwTaK_W_V_w616rB52bRfUs8SDkNHLW61QJz5Boz8luOTB-Mhcl3NyT20q9_A-EZcnAetYLAJMtk-QuI/s1600/facebook_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaPz5wRxxJ5217Be8yWV3zTw5sRn4QJhcd375KC60xyjguQz9c6VM0jNuBDAHmHZo7LzROCCNMiBQny0jsi2SsDordG0mTNupae7w-soHAmAIdjfFyyPvMJ6rjUBEz4wa0mgw3kAtn1rg/s1600/linkedin_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGuaqrvPnV_ioVg_oEpJ19hkt9GtZJXWvMrLh7Y8uG1kYY8UpPTj9_YWzYLGJB25NhhCCG4Tah7T_xSLWiTfr7dSjgddBQj_USR6JHCKGUFf9gTLSjNOsFOaDSgkwiwq_eg-cnJjg7Zs/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwXkRDD1zU_gBYv0N0W9OaJrrVntMb4BFclIiXXlmiZVTpnyKPxGFgMLzcIgLN5L3p_yvON9zsBNAI-91Cm448pLmvd-0qW4br_FLyQ31t2jZ-SkgonUg8kbEWQ66WNMhEFHWya47Q7Sw/s1600/youtube_32.png'); }

5. Find this tag by using Ctrl+F   <div class='post-footer-line post-footer-line-1'/>

6. Paste below code before <div class='post-footer-line post-footer-line-1'/> code

<div class="spinning_icons">
<a href="http://twitter.com/share?text=&quot; + data:post.title + &quot;&amp;url=&quot" class="twitter" title="twitter">Twitter</a>

<a href="http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot" class="delicious" title="delicious">Delicious</a>

<a href="http://digg.com/submit?phase=&quot; + &quot;2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot" class="digg" title="digg">Digg</a>

<a href="http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot" class="facebook" title="facebook">Facebook</a>

<a href="http://www.linkedin.com/shareArticle?mini=&quot; + &quot;true&amp;url=&quot" class="linkedin" title="linkedin">Linkedin</a>

<a href="http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot" class="stumbleupon" title="stumbleupon">Stumbleupon</a>

</div>



7. Now save your Template. You are done.

1 comment:

  1. I think...
    This Social Sharing Buttons has Spinning Hover Effect...???
    Wooowww...
    I must add it into my second site.

    ReplyDelete