Header Ads

  • Breaking News

    Spinning Social Icons With CSS3 For Blogger

    How To Add Spinning Icons With CSS3 To Blogger?

    Follow below steps to add it to your blog.
    1. Copy the code
    2. Replace my usernames with yours
    3. Go to Blogger Dashboard > Layout
    4. Click on Add a Gadget
    5. Select HTML/JavaScript
    6. Paste your code and save it.



    <style>p#hb_socialicons img { /* Spinning Social Icons Widget By HelperBlogger */    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}
    p#hb_socialicons img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);}
    /* Spinning Social Icons Widget By HelperBlogger */</style>   
    <center><p id="hb_socialicons">    <a href="http://www.facebook.com/user/"><img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>    <a href="http://www.twitter.com/user/"><img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>    <a href="https://plus.google.com/u/0/user"><img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>    <a href="http://www.feeds.feedburner.com/user/"><img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>    <a href="http://www.youtube.com/user/"><img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a></p></center>

    7. Click Save and you're done



    No comments

    Post Top Ad

    Post Bottom Ad