Iconos de Redes Sociales con efecto giro

octubre 16, 2013



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 ♥






Te encantará:

26 pensamientos ¡falta el tuyo! ;)

  1. Hola Celia!, lo he puesto, y por más que miro y remiro, no hay manera de hacerlos girar....no sé que haré mal.

    http://mamastiempocompleto.blogspot.com.es/

    Un saludo! :)

    ResponderEliminar
    Respuestas
    1. En Mozilla Firefox va bien :) pero en Explorer no me va :(

      Eliminar
    2. Posiblemente sea por el navegador, acabo de entrar y si que giran. Yo uso Chrome :)

      Eliminar
    3. Si, me temo que es por el navegador, muchísimas gracias Celia!!!

      Eliminar
    4. ¡Gracias a ti, preciosa!

      Feliz jueves ♥

      Eliminar
  2. Yo lo probé hace tiempo en http://juliamanualidades.blogspot.com.es/ pero... Cuando pasas el ratón sobre el botón, como que el resto del texto se convierte en bold... :S

    ResponderEliminar
    Respuestas
    1. ¡Hola Lourdes, he estado mirando y tienes el código bien puesto! Ni idea de porqué le pasas eso a tus Tabs... :S

      Tendría que verlo desde dentro y hacer pruebas...

      ¡Lo siento!

      Eliminar
    2. Gracias! No te preocupes, ya lo miraré ;) Si te lo comentaba porque he visto que en el ejemplo tuyo también ocurre eso, al menos en mi navegador...

      Eliminar
    3. ¿ocurre eso es mi ejemplo? ¿en este blog?

      http://pruebastutorialeselperrodepapel.blogspot.com.es/

      ¡Uy! Pues yo no lo veo ¡jajaja! Le hice solo para eso y no tengo menú de páginas :)

      Eliminar
    4. Jajaja, sí. Yo sí lo veo.
      Lo veo en el texto (título y descripción).

      Cosa rara... :S

      Eliminar
    5. jajajaja ¿qué navegador usas?

      Que cosa más rara, si... En Chrome se ve bien, pero en el tuyo sí que veo como tus páginas se ponen en negrita :)

      Eliminar
    6. Falta poco para Halloween... jajajajaja

      Eliminar
  3. Gracias a este tutorial me has recordado que yo los monte asi con el blog en pruebas, asi que voy a tener que revisarlo que no se que paso al pasarlo que se fue el efecto.

    ResponderEliminar
  4. Hola Celia, muchisimas gracias por el tutorial, es extraordinario.
    Estoy teniendo una dificultad al posicionarlo en el centro de la página, lo logro cambiando en text align a enter y cambiando los dos codigos que inmediatamente se encuentran debajo a center, pero lo que sucede es que no giran. Como hago para que giren? (Tanto a la izq como a la derecha si giran).
    Saludos!!

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa! Tendría que verlo instalado en tu blog ¿me pasas el enlace?

      ¡¡Feliz miércoles!!

      Eliminar
    2. Buenisimo! Este es el enlace: http://arquitecturandoenbuenosaires.blogspot.com.ar/
      Estoy en plena producción para lanzar nuevas secciones y tus tutoriales me fueron más que útiles! Mil gracias!!!

      Eliminar
    3. Celia probando, probando y probando 100 veces más lo logré! Si gustás pasa a ver como va quedando el blog gracias a tu ayuda! Seguiré trabajando para el lanzamiento! Feliz Finde!!!

      Eliminar
    4. ¡¡Genial, Romina!! Me alegra saber que lo has conseguido :D

      ¡¡Besos!!

      Eliminar
  5. Hola probé lo de hacer que giren los iconos pero no lo conseguí, solo me sale el icono, aunque si que funciona redireccionando a mi página de facebook, y por cierto me sale un puntito al lado del icono y no me sale tampoco lo que quiero que diga (REDES SOCIALES). Ayúdame si puedes http://todoscocinando-recetasfaciles.blogspot.com.es/

    ResponderEliminar
  6. Hola guapa, al pasar el cursor por encima a mí si me aparece: Página de Facebook. ¿Qué es lo que quieres que diga? Tienes que escribirlo en Title ;)

    Es cierto que tu icono no gira y que aparece un puntito a la izquierda, viendo el código desde fuera, en principio está todo bien, ¿has probado a poner dos iconos? He usado ese código muchas veces, pero nunca para un solo objeto, así que no sé decirte lo que puede suceder.

    ResponderEliminar
    Respuestas
    1. Bueno gracias igualmente, aunque tenga los puntitos no se ve tan mal. y a que te refieres con dos iconos?, tengo el de twitter y facebook que son los que uso

      Eliminar
    2. ¡vaya! juraría que cuando lo miré la primera vez solo estaba el de facebook... ¡estoy perdiendo la cabeza! jajaja

      pues he vuelto a revisar el código y está bien, no entiendo porqué te aparece en forma de lista (con los puntos) y no giran... ¿tienes algún otro código instalado? Puede que entren en conflicto y uno anule al otro... otra cosa no se me ocurre :S

      Eliminar
  7. Hola Celia,
    Un tutorial maravilloso, me he puesto los iconos y me encanta el resultado. Lo único es que me gustaria ponerlos en el sidebar, no en la cabecera, estéticamente no me gusta como queda. ¿Me puedes decir como he de hacer??

    Grácias guapa, feliz finde,

    MAR
    oasisingular

    ResponderEliminar
    Respuestas
    1. ¡Hola Mar!

      Solo tienes que añadir el código donde enlazas las imágenes de tus iconos y tus perfiles en las redes sociales como gadget html/javascript desde Diseño en tu sidebar :)

      ¡Ya me cuentas el resultado!

      Gracias a ti :)

      Eliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.