Iconos de Redes Sociales con efecto giro

Ya sabes que me gusta diseñar blogs de estética sencilla, clara, legible, que no desvíe la atención del lector hacia la decoración y que lo anime a leer el contenido... ¡Pero a los efectos en los iconos de redes sociales no he podido resistirme! Creo que animan a la visita a hacer click y eso es bueno para nosotros ¿verdad?

Por eso, después de ver que os gustó el efecto de cambio de color, hoy me he animado con otro también muy guay. Vamos a ver como añadir un efecto giro a nuestro iconos de redes sociales, para darle un toque original y diferente a nuestro blog.

Puedes ver el ejemplo de los iconos con efecto giro en este blog de pruebas:

Iconos con Efecto Giro

Insertar Código efecto giro en la plantilla HTML

Empezamos. Primero vamos a necesitar este código, para aplicar formato y el efecto giro a los diferentes iconos:

/* Para el bloque(tabla) de las redes sociales */ #redes_sociales { width:100%; height:50px; margin-bottom:20px; display:block; clear:both; } .redes_sociales{display:table} .redes_sociales ul { list-style-image:none; list-style-position:outside; list-style-type:none; text-align:right; padding:5px 5px 0 0 } .redes_sociales ul { padding:0; float:right; margin-bottom:0; } .redes_sociales li.redes_sociales { background:none !important; padding-left:0 !important; display:inline; float:left; margin-left:6px; } .redes_sociales 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); }

Width: el ancho de nuestra barra lateral, para que encaje perfectamente en nuestro blog.
Height: el alto que queremos que ocupe en nuestra barra lateral.
text-align: indicamos donde queremos que vayan nuestras redes sociales: 

rigth: derecha
left: izquierda
center: centro


Este código tenemos que pegarlo tal cual en nuestra plantilla, modificando solo el ancho y alto, aunque ésto podemos hacerlo una vez hayamos añadido nuestros iconos, de momento no nos preocuparemos de ello.

Entramos en nuestra plantilla HTML, pinchamos en cualquier zona de nuestra plantilla, pulsamos Control + F y en el buscador interno escribimos:

]]></b:skin>

Pegaremos el código justo encima. En éste área es donde pondremos todos los estilos de nuestra plantilla.

Comprobamos en Vista Previa que no hay errores en la plantilla y guardamos. De momento no vemos nada porque no hemos añadido los iconos. Vamos a ello.

Elegir nuestro iconos de redes sociales personalizados

Puedes usar el buscador del blog, escribir "redes sociales" y te saldrán un montón de entradas con diferentes iconos entre los que elegir. También puedes usar los tuyos propios, pero recuerda que trabajamos con enlaces, por lo que necesitas tenerlos subidos a internet, con dropbox, picasa o similar.

Instalar nuestros iconos en la Plantilla HTML de Blogger

Vamos a instalarlos en la cabecera, como tengo yo los míos. Para ello, vamos a nuestra Plantilla HTML, abrimos el buscador interno como vimos un poco más arriba y esta vez buscamos:

<header>

Y justo arriba, pegaremos nuestro código de redes sociales, similar a éste:

<!-- AQUI TODO LO QUE QUIERAS PONER ARRIBA --> <div class='redes_sociales' id='redes_sociales'>       <ul>         <li class='redes_sociales'>          <a href='URL DE TU PERFIL EN LA RED SOCIAL' target='_blank'><img border='0' height='35' src='URL DE TU IMAGEN' target='_blank' title='TEXTO QUE VERÁN AL PASAR EL CURSOR POR ENCIMA DEL ICONO' width='35'/></a>         </li>         <li class='redes_sociales'>          <a href='URL DE TU PERFIL EN LA RED SOCIAL' target='_blank'><img border='0' height='35' src='URL DE TU IMAGEN' target='_blank' title='TEXTO QUE VERÁN AL PASAR EL CURSOR POR ENCIMA DEL ICONO' width='35'/></a>         </li>         <li class='redes_sociales'>          <a href='URL DE TU PERFIL EN LA RED SOCIAL' target='_blank'><img border='0' height='35' src='URL DE TU IMAGEN' target='_blank' title='TEXTO QUE VERÁN AL PASAR EL CURSOR POR ENCIMA DEL ICONO' width='35'/></a>         </li>         </ul></div> <!-- FIN -->

Cada red social va enmarcada entre:

<li>
</li>

Solo tienes que añadir tus enlaces y textos donde te indico en otro color. Y puedes añadir tantas redes sociales como necesites, creando otro <li></li> antes del cierre </ul></div>

Hemos usado una lista HTML, puedes ver como se hacen en esta entrada sobre como crear listas en HTML para comprender mejor la dinámica que hemos seguido.

Ahora solo queda comprobar en Vista Previa que no hay errores en la plantilla, guardamos los cambios ¡y listo! Ya tenemos nuestros iconos de redes sociales con efecto giro instalados en la cabecera del blog.

¿Qué te ha parecido? ¿Te animas a intentarlo?

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥