Iconos Sociales con efecto giratorio

By: Jonathan Lozano on 16:56

Las redes sociales, se han vuelto en algo primordial si queremos dar a conocer a los lectores de vuestro blog, que hiciste una publicacion, por eso hoy les traigo iconos de redes sociales que obtienen el efecto de girar al momento de pasar el cursor sobre ellos lo puedes encontrar en la parte superior de tu blog,puedes ver los iconos en accion en este blog de pruebas.

AÑADIENDO EL TRUCO

---

Nos vamos a la Edicion HTML de vuestro blog, con CTRL + F buscamos ]]></b:skin> y antes pegamos:

/* Iconos de redes sociales
----------------------------------------------- */
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px;
display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}

Luego buscamos la siguiente linea:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'

Y arriba de ella, agrega:

<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='URL DE FACEBOOK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUfHwo8YkLCdz_jh5Hmci8IQiaLwZDeSvYJAjiKhsv7aSx20EKLE2snsb5Ezvm7wMh_Il1fhbqFVEVeVH_XsPD4M-xb6SoqHkIcCujMj_BWMtiieUuQPXc7tYl2Iiz0jtBMxvuIkhaN_M/s36/social-facebook.png'/></a></li>
<li class='social_icon'><a href='URL DE TWITTER'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHMhzC0LQ7ggf0kJzFaCd1lU4-v8TtGhB4UI0mGN7juqYdPS4lWaY1KvoM_SHa-20uS9B1SiRJ24lQUi3ox8ELufmG4ByXDcKHThDkSi4AvUl0juLnQrh7b08H82D7SVXiLx-LOslXisc/s36/social-twitter.png'/></a></li>
<li class='social_icon'><a href='URL DE GOOGLE PLUS'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1GmaEmu48TdiuXlV5yT7X4WDO_yrsa71nsYRmAiJOf-k1s2Z-wk19ywLbb3bNoBjyxpepAI83Yc0bxYrtND28-yVa8fw9jsy0Rbfy9cDfR4JJovhyphenhyphenJBizDiQ4sQbgTK-yK0UpW2ZWHNQ/s36/social-googleplus.png'/></a></li>
<li class='social_icon'><a href='http://nombre-de-mi-blog.blogspot.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKE_TaoFBxUZ1OvAPQ9Qalf4c63K4etY7sXxA1ExjykoMOPmXOkWlVGfKy526yV-t9NMAnEWvwBgOVqP1b6ESECQ6dJiWw8MgJIOiO9PnEuU2jv4TI0IvoP1Vab-F7EX7r4xW_6d1yFOA/s36/social-rss.png'/></a></li>
</ul></div>

Nota Cambia lo que está en rojo por lo que indiga en cada caso. Puedes añadir más iconos, solo añadelos antes del </ul></div> una linea como esta:

<li class='social_icon'><a href='URL del enlace'><img border='0' src='URL de la imagen'/></a></li>

También puedes ponerlo en un HTML/Javascript. Eso queda a eleccion de cada uno.
Lo que está en troll es la url de la imagen, si no te gusta el diseño de los iconos los puedes cambiar por estas imagenes:

Iconos sacados de ICONFINDER