Mini Social Media Icons With Image Sprites For Blogger

beautiful collection of small social media icons. These icons are made using pure CSS and do a charming bottom-to-up animation when hovered on.

these icons are created using image sprites instead of individual images. Hence, they won't slow your page down !!

Live Demo

Here's the code, paste it wherever you want these awesome icons to appear:

<style>
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/AVvXsEhqYHZmNf9FQS_O_gyOaigKN4gTsCYNJFhn14W6XbDhgbQJ2e0CLorAH1xqRaM3pdTZtsU0rEwrnH8BVrm_xVJAPC0eRVCRg99ivm5WCUh4lIvBt5E7Xnt3pkw9amb6AtdnoeJDixuBO24/s924/mini-social-icons.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/AVvXsEhqYHZmNf9FQS_O_gyOaigKN4gTsCYNJFhn14W6XbDhgbQJ2e0CLorAH1xqRaM3pdTZtsU0rEwrnH8BVrm_xVJAPC0eRVCRg99ivm5WCUh4lIvBt5E7Xnt3pkw9amb6AtdnoeJDixuBO24/s924/mini-social-icons.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 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.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>
<ul class="spicesocialwidget">
<li class="rss">
<a href="http://feeds.feedburner.com/besttutsplus" rel="nofollow" target="_blank" title="RSS Feeds"></a></li>
<li class="facebook">
<a href="http://www.facebook.com/besttutsplus" rel="nofollow" target="_blank" title="Facebook"></a></li>
<li class="googleplus">
<a href="https://www.plus.google.com/109777931151199469710" rel="nofollow" target="_blank" title="Google Plus"></a></li>
<li class="twitter">
<a href="http://www.twitter.com/besttutsplus" rel="nofollow" target="_blank" title="Twitter"></a></li>
<li class="youtube">
<a href="http://www.youtube.com/besttutsplus" rel="nofollow" target="_blank" title="YouTube"></a></li>
</ul>

Note :

Replace the text highlighted ( besttutsplus ) with your respective social links. Also, if you don't want a particular icon to appear, simply remove it's entire <li> tag.