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
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
7. Now save your Template. You are done.
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=" + data:post.title + "&url="" class="twitter" title="twitter">Twitter</a> <a href="http://del.icio.us/post?url=" + data:post.url + "&title="" class="delicious" title="delicious">Delicious</a> <a href="http://digg.com/submit?phase=" + "2&url=" + data:post.url + "&title="" class="digg" title="digg">Digg</a> <a href="http://www.facebook.com/sharer.php?u=" + data:post.url + "&t="" class="facebook" title="facebook">Facebook</a> <a href="http://www.linkedin.com/shareArticle?mini=" + "true&url="" class="linkedin" title="linkedin">Linkedin</a> <a href="http://www.stumbleupon.com/submit?url=" + data:post.url + "" class="stumbleupon" title="stumbleupon">Stumbleupon</a> </div>
7. Now save your Template. You are done.
I think...
ReplyDeleteThis Social Sharing Buttons has Spinning Hover Effect...???
Wooowww...
I must add it into my second site.