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('http://1.bp.blogspot.com/-mxUHRwVg-0g/TzvZYtAEyrI/AAAAAAAACts/f7_QxX03c9k/s1600/twitter_32.png'); }
.delicious{ background:url('http://1.bp.blogspot.com/-fxvge7IVP_0/TzvZTJdLHGI/AAAAAAAACs4/W_1mS4jVBw8/s1600/delicious_32.png'); }
.digg{ background:url('http://2.bp.blogspot.com/-ooYCSeCOB5I/TzvZTy7y41I/AAAAAAAACs8/4yuBMS3tUPA/s1600/digg_32.png'); }
.facebook{ background:url('http://3.bp.blogspot.com/-TScBRGxU9Lc/Tzvlcv90XGI/AAAAAAAACuE/chFHrMti4HA/s1600/facebook_32.png'); }
.linkedin{ background:url('http://1.bp.blogspot.com/-4NFlcfudgWg/TzvZXZcmSbI/AAAAAAAACtc/7mn2HcWX00g/s1600/linkedin_32.png'); }
.stumbleupon{ background:url('http://3.bp.blogspot.com/-rPU_iNN7Wk8/TzvZYPlQLPI/AAAAAAAACtk/LT-XQiVJZpY/s1600/stumbleupon_32.png'); }
.youtube{ background:url('http://4.bp.blogspot.com/-zJVHywcJLgQ/TzvZZfljGUI/AAAAAAAACt0/jKrO2ijfC3c/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.