Free Downloading Stuff: How To Add Mini Social Icons With CSS And Image Sprite Flip Effect In Blogger And Wordpress

Mini Social Icons With CSS And Image Sprite Flip Effect In Blogger And Wordpress

Just last week I published the pop out effect social icons.In a comment on that post Ger asked "Can you write a tutorial for the icons you have in the footer of this page ? The ones that turn color on hover !".The icons he refers to are a neat set of simple icons with a flip color effect and they are a popular option on many of the top websites and blogs.I only added them to the footer in the last site update and had not planned on a tutorial but ask and you shall receive.

So like the pop out icons these use simple CSS to create the effect but this time we also use a sprite instead of individual images.This makes the flip smooth and adds less load time to your blog.I have tutorials for adding them to your sidebar on both Wordpress and Blogger but you could add them to your blog footer or even in a menu.

The icons are for Facebook, Twitter, Google+, Rss Feed, Pinterest, Skype, Vimeo, Dribbble, Flickr, LinkedIn and Youtube.But as I did in the footer you can remove the icons you don't want displayed.

Live Demo :

This is a live demo so you can hover to see the effect.

Adding The Mini Flip Social Icons To Blogger

Step 1) In The New Blogger Dashboard Click The Drop Down For Your Blog > Choose Layout > Click Add A Gadget > Choose HTML/Javascript > Paste In The Code as shown in the video below:

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</ul>

<style>

ul.spicesocialwidget {float:right;}

ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}

ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Ij6L_iiMi2erfPAaghl6nQSLcCfVK-feddahGljkRJjaPRKEiCQjZ9D8rCTmg_RPRSEXT1JDjy1TV8sFz_rCUHnnviI7EhPZKFlbO0qVTMw-RpBHRTkLSyEW2rlx2FtFzn5lAw4y0dqM/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}

.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Ij6L_iiMi2erfPAaghl6nQSLcCfVK-feddahGljkRJjaPRKEiCQjZ9D8rCTmg_RPRSEXT1JDjy1TV8sFz_rCUHnnviI7EhPZKFlbO0qVTMw-RpBHRTkLSyEW2rlx2FtFzn5lAw4y0dqM/s1600/spice-social-gadget-sprite.png' )}

ul.spicesocialwidget li.facebook a{ background-position:0 0}

ul.spicesocialwidget li.flickr a{ background-position:-32px 0}

ul.spicesocialwidget li.dribbble a{ background-position:-64px 0}

ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}

ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}

ul.spicesocialwidget li.pinterest a{ background-position:-160px 0}

ul.spicesocialwidget li.rss a{ background-position:-192px 0}

ul.spicesocialwidget li.skype a{ background-position:-224px 0}

ul.spicesocialwidget li.twitter a{ background-position:-256px 0}

ul.spicesocialwidget li.vimeo a{ background-position:-288px 0}

ul.spicesocialwidget li.youtube a{ background-position:-320px 0}

ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}

ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px}

ul.spicesocialwidget li.dribbble a:hover, #sidebar ul.spicesocialwidget li.dribbble a:hover{ background-position:-64px -32px}

ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}

ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}

ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px}

ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}

ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}

ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}

ul.spicesocialwidget li.vimeo a:hover, #sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px -32px}

ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}

</style>

Adding The Mini Flip Social Icons To Wordpress

1) In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste in the code as shown in the video below :

Code: