Iconos sociales con efecto y giro

Hola amigos!!. Ya regrese con mejores entradas y originales. Bueno Estoy tan feliz de volver a postear algo. Vamos a empezar. hoy les traigo estos iconos con efecto y giro. Se pueden ver en esta imagen:



Para ponerlo solo tiene que.

1._ Ir a blogger.com

2._ (En su blog) Se van a plantilla

3._ Le ponen en Edicion HTML

Ahi buscan (Ctrl + f para buscar en google chrome) ]]></b:skin>  pegan antes de este:



social-networking menus
----------------------------------------------------*/
.footer-credit-m2{float:left;width:20px;height:1px}
.social-wrap{float:left;width:668px}
#social-networking{margin:0 auto}
.social-wrap-m1{float:left;width:22px;height:1px}
#social-networking li{float:left}
#social-networking a{display:block;position:relative;clear:both;margin:0 auto;padding:0 10px 0 0}
#social-networking span{opacity:0.4;width:24px;height:24px;display:block;border:4px solid #404040;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}
#social-networking span:hover{border:4px solid #272728;opacity:0.9;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
#social-networking .social-icon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj72KQubK4mf5u1xScnHP5ZA3gyjyWoq5XK13yiJA2Q6q9sXEd_zYab35XAbpvGHcB7iwsk1OZ7wrQHEaDXHiK-mEEjllZcHgKzqqEtftVWFxm63HJVip4MeiPlFEZQNS9qG9ZDdIk5YOKT/s0/social.png);background-color:transparent;background-repeat:no-repeat}
#footer-bottom a:link,#footer-bottom a:visited,#footer-bottom a:hover{color:#717172}
.opacity #social-networking .social-icon{opacity:0.85}
.opacity #social-networking a:hover .social-icon{opacity:0.6}
#social-networking .facebook{background-position:0 -28px}
#social-networking .flickr{background-position:0 -87px}
#social-networking .vimeo{background-position:0 -233px}
#social-networking .youtube{background-position:0 -291px}
#social-networking .linkedin{background-position:0 -322px}
#social-networking .googleplus{background-position:0 -353px}
#social-networking .dribbble{background-position:0 -205px}
#social-networking .tumblr{background-position:0 -177px}
#social-networking .skype{background-position:0 -262px}
#social-networking .delicious{background-position:0 -149px}
#social-networking .digg{background-position:0 -117px}
#social-networking .rss{background-position:0 -57px}

Ahora van al footer del blog. Uno de los ultimos codigos. Hasta abajo de la plantilla. y pegan este

<!-- start #social-networking-->

  <div class='social-wrap'>
  <!-- start #social-networking-->
<ul id='social-networking'>
<li><a href='#' id='twitter-link' title='twitter'><span class='twitter social-icon'/></a></li>
<li><a href='#' id='facebook-link' title='facebook'><span class='facebook social-icon'/></a></li>
<li><a href='#' id='flickr-link' title='flickr'><span class='flickr social-icon'/></a></li>
<li><a href='#' id='vimeo-link' target='_blank' title='vimeo'><span class='vimeo social-icon'/></a></li>
<li><a href='#' id='youtube-link' title='youtube'><span class='youtube social-icon'/></a></li>
<li><a href='#' id='linkedin-link' title='linkedin'><span class='linkedin social-icon'/></a></li>
<li><a href='#' id='googleplus-link' title='googleplus'><span class='googleplus social-icon'/></a></li>
<li><a href='#' id='dribbble-link' title='dribbble'><span class='dribbble social-icon'/></a></li>
<li><a href='#' id='tumblr-link' title='tumblr'><span class='tumblr social-icon'/></a></li>
<li><a href='#' id='skype-link' title='skype'><span class='skype social-icon'/></a></li>
<li><a href='#' id='delicious-link' title='delicious'><span class='delicious social-icon'/></a></li>
<li><a href='#' id='digg-link' title='digg'><span class='digg social-icon'/></a></li>
<li><a href='#' title='rss'><span class='rss social-icon'/></a></li>
</ul>
<!-- end #social-networking-->
  </div>

El # lo remplazan por lo que se le indican. 

Via / http://www.miltrucosblogger.info