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:

]]>

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:

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



Cada red social va enmarcada entre:

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

antes del cierre

¿Qué diferencia hay entre los dos boletines?

*Click AQUI para saberlo*