How To Add Spinning Social Media Icons To Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Spinning social media icons are really awesome with CSS3 effect. Many bloggers use this awesome social share service with amazing icons. You just have to view a demo. Then you will understand how beautiful is this! Social connections are great source of new readers. These glowing icons really encourage your visitors to share your articles.

How To Add Spinning Social Media Icons To Blogger

View a demo. It is really awesome dude

Go to Blogger Dashboard →: Design Edit HTML

Find the following code using F3

]]></b:skin>

Now copy and paste the following code just before / above ]]></b:skin>

/* Spinning Social Media Icons by www.edutechnology.net */
.container{
 width:900px;
 margin:30px auto;
 padding:25px;
 min-height:400px;
 height:auto;
}
.container h2 { margin-top:30px;}
.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://lh6.googleusercontent.com/-i0eKi6e3fBU/Tzt7v68zN6I/AAAAAAAAAD0/w8tbZw1SzXs/h120/twitter_32.png'); }
.delicious{ background:url('https://lh4.googleusercontent.com/-cL6zQp62U5E/Tzt7udXrHWI/AAAAAAAAADI/iIKz5XYO8qA/h120/delicious_32.png'); }
.digg{ background:url('https://lh6.googleusercontent.com/--kxQgbOFE5A/Tzt7uaqN9VI/AAAAAAAAADM/2CsdU4cOIyU/h120/digg_32.png'); }
.dribbble{ background:url('https://lh4.googleusercontent.com/-9aKDjzBga-c/Tzt7uUvPy0I/AAAAAAAAADY/YNTROVDMFf4/h120/dribbble_32.png'); }
.email{ background:url('https://lh5.googleusercontent.com/-DlM5MD-yzVw/Tzt7ui6TQhI/AAAAAAAAADQ/Djy_anfVFK8/h120/email_32.png'); }
.facebook{ background:url('https://lh5.googleusercontent.com/-gFkG6cvv9xY/Tzt7u0tCTbI/AAAAAAAAADU/YlWWIdFTZmc/h120/facebook_32.png'); }
.flickr{ background:url('https://lh6.googleusercontent.com/-QIpx8LY8rfs/Tzt7vC7q0vI/AAAAAAAAADc/j4MJI06WVl8/h120/flickr_32.png'); }
.foursquare{ background:url('https://lh4.googleusercontent.com/-sujDxWRKov0/Tzt7vRdLK7I/AAAAAAAAADg/IxtCNHSi8bs/h120/foursquare_32.png'); }
.linkedin{ background:url('https://lh6.googleusercontent.com/-PmqL6FZ0ez4/Tzt7vd-h2zI/AAAAAAAAADk/oaTu0FO4Oo4/h120/linkedin_32.png'); }
.rss{ background:url('https://lh5.googleusercontent.com/-w2M8eRUHBpM/Tzt7vliLIfI/AAAAAAAAAD4/Cr7s5MKAiR4/h120/rss_32.png'); }
.stumbleupon{ background:url('https://lh6.googleusercontent.com/-aa7dkZ6Yt4Y/Tzt7xCTGUMI/AAAAAAAAAEI/z_8Keo9cdXg/h120/stumbleupon_32.png'); }
.youtube{ background:url('https://lh6.googleusercontent.com/-H3qw0cR_P0Q/Tzt7wiqY59I/AAAAAAAAAD8/Qh0WpDxqpD4/h120/youtube_32.png'); }

/* Spinning Social Media Icons by www.edutechnology.net */

Now save the template

Now Add a HTML/Javascript widget and paste the following code in it and save

<div class="spinning_icons">
    <a href="http://www.twitter.com/username" class="twitter" title="twitter">Twitter</a>
    <a href="http://www.delicious.com/username" class="delicious" title="delicious">Delicious</a>
    <a href="http://www.digg.com/username" class="digg" title="digg">Digg</a>
    <a href="http://wwww.dribbble.com/username" class="dribbble" title="dribbble">Dribbble</a>
    <a href="http://feedburner.google.com/fb/a/mailverify?uri=username" class="email" title="email">Email</a>
    <a href="https://www.facebook.com/username/" class="facebook" title="facebook">Facebook</a>
    <a href="http://www.flickr.com/username" class="flickr" title="flickr">Flickr</a>
    <a href="https://foursquare.com/username" class="foursquare" title="foursquare">Foursquare</a>
    <a href="http://in.linkedin.com/username" class="linkedin" title="linkedin">Linkedin</a>
    <a href="http://feeds.feedburner.com/username" class="rss" title="rss">RSS</a>
    <a href="http://www.stumbleupon.com/username" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
    <a href="http://www.youtube.com/username" class="youtube" title="youtube">YouTube</a>
</div>

Must change the username of the social networking sites mentioned above highlighted with red color

Change the widget and done . You will find out a nice CSS3 spinning social media icons in blogger

Enjoyed the article ? Take 10 seconds only to share the post