Add Mini Social Icons With CSS And Image Sprite Flip Effect

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.

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

<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/AVvXsEhQn9DF2h5L2znGEDdpnKTNh1X9TqnawCgr7A_94TbgZ2fxeYSnxW87Pbn1q3fdiiMx0FKF6qGfY0ZKAcZiZ2fieMRZp6yecCVWSOZYrceu4rTQunezVyfGXwHVrwl_i6fRsgFy2kLUbqh9/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/AVvXsEhQn9DF2h5L2znGEDdpnKTNh1X9TqnawCgr7A_94TbgZ2fxeYSnxW87Pbn1q3fdiiMx0FKF6qGfY0ZKAcZiZ2fieMRZp6yecCVWSOZYrceu4rTQunezVyfGXwHVrwl_i6fRsgFy2kLUbqh9/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>

Note Change the links in red with links to your social profiles.