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/AVvXsEg_iWMuswF-3S-QMH9inFc8bMYxAkrEgUXenTzgCZ-5-NGy9uQLGn2iL8HBEJpZoCa8zgictLDVzz5c9vJyhZclagrJKregd1_nBc44okynWX3Bt5R_8zgF6jJr_H059pKm5dMXCfBXZ7k/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmBHvgpCH25JfvclHgk1pFTX-OSyqf41KYzUt3UPBScwR7r_jwDGLsLf4O5LQ9WQbPUHCw_0l6LAh9uEnrvZ9CGMRrDNnFSbNqRAWJ0vdhY2mdhMM8ym5Si8kegASCUxSKmXjseC6ds6M/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM4-xatlZS45QhGBz4xPRYuPUj3Jnkwmmku9doT3BnpTQWBDV3E9qagsbZVnf1JCZu8EOnm2E6H9UC6v28j9iSZA0Zb-RwT3qcTtibHtNcrGwIsg3y9EWvhFetR9Ws_J-ZRSPxdMBDggs/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rhesOgkR3V-hRJ_ZmriFBA4aZuKgHRN8izGvV1rKiiZSlM-tf7wkuL6C-ne55UhkPd1nV7-ab8UpmEdEpf6PpUL7_l_-tfMgjVuzYYVkev6sVGJK-UMx4ZvdIEGVfpeka3t_Dfy2nCk/s1600/facebook_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_RTQzy7n21Ad-RBXFKZHR2epZioeUgZJxVv3LXUlYwvbMmnWoYEsph8M53VEIVrYrooiHHulBp4VK1wNiQjTlOEXNa21LPWLiAL6VN3rMsrIScnIt55K67lYf877GTSi-o611oHgmwE/s1600/linkedin_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKTs6WCBj2dwhFeGBMASJoDvF9nd7XS1ccJQ31z7wMK72q4Bv1b3PU48DwOY1MGyBZKrIgg1f3BosB4iE3GWMUg3UHbOE6FDdCxbd6RgTSKm69AeVCdK1uJ1796t9C5CEVhJSjE9cGXVM/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_RdYL5QxN32Wyl47Rw6AjEiIhr7FO2c7rEIX3nquVpNKrgVHaE8hURzQbk2wUXj9d9BnpI0P16uvgnNuH8xNAa1L0FdjHAZGN1GE7VKr-QF0vqTn9NTrrGj3c2jVzwZFh_Cq3p7pvFQ/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.
No comments:
Post a Comment