Create CSS3 Spinning Social Buttons In Blogger

Posted by Unknown in , , , , , , , , on Thursday, November 29, 2012


Social widgets can give visitors the easier way to interact with you through the social networks. This social icon can create a 360' spinning effect everytime you hover your mouse on the icon.

To add this widget, Please follow the below steps :

  • Go to Dashboard > Layout.
  • Click on "Add a Gadget".
  • Select HTML/Java Script widget.
  • Paste the following codes into the widget box : 
     <style>p#OW_socialicons img {
     /* Spinning Social Icons Widget By digita7seven */
        -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#OW_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 digita7seven */
    </style>



    <center><p id="OW_socialicons">
        <a href="http://www.facebook.com/robin0479/">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZoZFKSJnRRBhsMu8QcT9A_i3dRZZ8LeT9bSRxf-UjXYjvX3qmw6P8_I89e8nIz7afduusJewv3wI373GvWxOF-WjFEoCA3DxY-s51VkmytrQl3mQCr5SDDv7qxCQYmuJeM8Tdg9xoAQ/s1600/otowebsite.blogspot.com-facebook.png" /></a>
        <a href="http://www.twitter.com/r_wu7/">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdi4GSfANK4BrzlPRa4STcHoYDl8Q6SxkzjxrG_KkkFCq2lMBs91bDgLHrZfVkITRkBlfZwAYH19B7Ggdr9CPlnisqsYTRgt0QvBrRVPLt3kQ63k9YqQiEOBoyw5lcd_Ajg3202MOsnw/s1600/otowebsite.blogspot.com-twitter.png" /></a>
        <a href="https://plus.google.com/103461883605930793533">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2MPzwvTf8TY2Y5-1-MP9QOSJA1-rINaptvHn09Hbg-9KVB3ZVgs2XcMVnkCwTdbGdq9LdNZf9kYkIlU3d3uiwBGTCUP_1EqXTKcZNoRmPTOEv1OPot5sDQVJQiCjzE78hreHYvTIbQ/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
        <a href="http://www.feeds.feedburner.com/digita7seven/">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-tB_gotPXk_guthae5h7Vg36lYXzl6L_yqNpCRXRSTQcMMmspwkVmH08XDF6A1XcbDP-vtHnLu-trf0ZEZP8Av3N0cKMNE9PEzWVK2yO0pZYbbaQSqviTPOxgBQsMEzZR4YA5s0Nr4Q/s1600/otowebsite.blogspot.com-rss.png" /></a>
        <a href="https://www.youtube.com/robin0479/">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRenX9O7tvakWsYUVky2tzjG4TnnFMV61cPKQJzV6UOP462X34CBt8ARoiisIUrOsyLJUqyzDpmAw8Zaxry8mIdUQxgZFRDm6eUgIcEvXVGOD8hQ9s9awfr2_KesWg0UrqL718QUWHHw/s1600/otowebsite.blogspot.com-youtube.png" /></a>
    </p></center>
  • Replace the above marked with red and save your widget.


        Also from Amazon :   
            1,000 Creative Writing Prompts : Ideas for Blogs, Scripts, Stories and More
            When you finally have the opportunity to sit down and write, you want absolutely nothing to get in your way. In an ideal world, the ideas would flow from head to pen quickly and easily. You would have thousands of ideas at your fingertips. This new idea-generating book makes that dream a reality.

            Other Great Stuffs : 

            Celebrity Blogging
            Discover The Secrets To Setting Up Your Own Personal Blog For MASSIVE Brand Building... And Build A Name For Yourself That People Will Know, Like And Trust!

            If You Have A Few Hours Per Week, Then We Can Show You How To Earn Significant Income With Your Own Blog! Step by Step. Click to find out !
            Know how to find a great market niche and write a successful blog? Great, you don’t need the steps within each of these components. Know how to design the web page and overcome technical difficulties? No? No problem, Here is a deeper level of instruction for that!

            Struggling to make money online? It's about to get quicker and easier than ever before...Click here !
            How JUST One Of The Blogs I Create During By The Forth Month Has Already Netted Me $2,537.29

            000webhost.com : Professional shared hosting quality in a free hosting package, Absolutely free !
            1500 MB of disk space, 100 GB of data transfer, PHP and MySQL support with no restrictions, cPanel control panel, Website Builder, Absolutely no advertising ! Join now : CLICK HERE !


            This entry was posted on Thursday, November 29, 2012 at 11:46:00 pm and is filed under , , , , , , , , . You can follow any responses to this entry through the RSS 2.0. You can



            ?max-results=10">');

            ?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");