Stylish Mini Icons Social Media Widget for Blogger

This widget contains beautiful and charming social media icons which are in grey shade and whenever someone hovers over them, they will change their color. This widget is used on many blogs and websites to grow their social media presence. It uses 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.

Demo:

You might Also Like:

• Collection of Metro Style Widgets for Blogger
• Best Facebook Like Widgets for Blogger
• Floating Social Media Buttons For blogger

Code:

<ul class="spicesocialwidget"><li class="facebook"><a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook"></a></li><li class="googleplus"><a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus"></a></li><li class="pinterest"><a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest"></a></li><li class="twitter"><a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter"></a></li><li class="rss"><a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss"></a></li><li class="skype"><a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype"></a></li><li class="vimeo"><a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo"></a></li><li class="dribbble"><a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble"></a></li><li class="flickr"><a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr"></a></li><li class="linkedin"><a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin"></a></li><li class="youtube"><a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube"></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/AVvXsEgNoXqj30NWdOZyXWjjY1OYAnGzkimDqde2Yv3m_ihISdW5unES8ogG7DbbgvDSgE4mpXnsvhdOaAiK1GbzdvTLR-Cr7eR5v1NLVhCRDvIIMHxr_Q5a0XvG4FmgLCGCSu8N2uuqJeTO1xnb/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/AVvXsEgNoXqj30NWdOZyXWjjY1OYAnGzkimDqde2Yv3m_ihISdW5unES8ogG7DbbgvDSgE4mpXnsvhdOaAiK1GbzdvTLR-Cr7eR5v1NLVhCRDvIIMHxr_Q5a0XvG4FmgLCGCSu8N2uuqJeTO1xnb/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>

 How to Use

• Log in to your blogger dashboard.
• Go to Layout ==> Add a gadget ==> Html/ Javascript.
• Copy the above code and paste it in Html/Javascript.
• You are done!

 Customization

• Change Blue text in code with your own links.
• If you want to remove an icon, simply remove the <li> tag.

Suppose you dont want/have dribbble account then remove the following code.

<li class="dribbble"><a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble"></a></li>

I hope you would like this cool widget and please share it with others.