How To Add Mini Social Icons With Flip Effect

This New Widget comes from the most popular site Spice Up Your Blog which consists of mini social icon with flipping effect as you can see the demo below-

Adding this widget in blogger-

Open any page and paste this 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/AVvXsEhcV9O2NdqzWqNsYEhhjA-j03zWrSFnimFGoDxBlkgjON7irmI_qljpM8HRPOLxrjkET6ZvoVNU6oo3QpmnmBrhcfD-4POI9MUtL9iOKwN6sI0oJqjEoe9Ux4R7Jpl_W3QzZMfxPXwgeQPT/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/AVvXsEhcV9O2NdqzWqNsYEhhjA-j03zWrSFnimFGoDxBlkgjON7irmI_qljpM8HRPOLxrjkET6ZvoVNU6oo3QpmnmBrhcfD-4POI9MUtL9iOKwN6sI0oJqjEoe9Ux4R7Jpl_W3QzZMfxPXwgeQPT/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>
Just Replace the social links with your url
Enjoy These Flipping Butttons in your blog :-)