miércoles, 15 de mayo de 2013

TUTORIAL: Iconos de redes sociales arriba del blog que giran al pasar el cursor

Bueno personitas ..
hoy os traigo un tutorial .. para que pondrías los botones Sociales en vuestro blog .. creo que lo deje explicado muy bien .. pero si tiene alguna duda .. ps solo tenéis que dejar algún comentario ^^


Constantemente me preguntan sobre la forma de poner arriba del blog iconos que enlacen a las redes sociales como tengo ahora mismo en esta plantilla, y es que tener iconos como estos a la vista incrementa la posibilidad de que los lectores puedan seguirnos por las distintas redes sociales ya que les dejamos el acceso a ellas de una forma más visible.
Hay varias formas de hacerlo, nosotros lo haremos usando una lista desordenada que incluirá los iconos de FacebookTwitterGoogle+ y el feed del blog, y como un extra haremos que los iconos giren al pasar el cursor sobre ellos, como estos:





Para poner estos íconos sociales en tu blog entra en la Edición HTML de la plantilla y agrega antes de
 ]]></b:skin> los estilos:
/* 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 SIN expandir los artilugios busca esta línea:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
Arriba de ella agrega la estructura:
<div class='social-icons' id='social-iconos'><ul><li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='http://lh3.googleusercontent.com/-9RgnEDN1jFc/UKK9O1S1TPI/AAAAAAAADSk/KOIvtDu-oSM/s36/social-facebook.png'/></a></li>
<li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='http://lh4.googleusercontent.com/-KtqAlZRCokQ/UKK9PbLsnSI/AAAAAAAADSg/njBnVDn3O9I/s36/social-twitter.png'/></a></li>
<li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://lh4.googleusercontent.com/-4PWKT-fgHJ8/UKK9O7mGEPI/AAAAAAAADSY/ENZ0BHmO6TY/s36/social-googleplus.png'/></a></li>
<li class='social_icon'><a href='http://nombre-de-mi-blog.com/feeds/posts/default'><img border='0' src='http://lh5.googleusercontent.com/-6hu6NkWouSw/UKK9PIQCrHI/AAAAAAAADSc/5QI5O-H7EYs/s36/social-rss.png'/></a></li>
</ul></div>
Cambia lo que está en color rojo por tus datos y listo. El primero es tu usuario de Facebook, el segundo el de Twitter, el tercero deberás cambiar las X por el ID de tu perfil de Google+, y en el cuarto deberás poner el nombre de tu blog.

Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes </ul></div> una línea como esta por cada icono extra que quieras:

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

Aunque están pensados para mostrarse arriba del blog puedes ponerlos donde tú quieras, incluso puedes ponerlos en un elemento HTML/Javascript, eso quedará a elección de cada quien.

El efecto que gira está hecho con CSS3 así que en navegadores antiguos este efecto no funcionará.
Los iconos son de Iconfinder excepto el de Google+ que lo he diseñado yo, pero pueden sustituirse por los iconos de tu elección.


Como podéis ver ..los míos están colocados arriba ..
^^

3 comentarios:

  1. holaa.gracias por poner este tutorial pero no entiendo esta parte que dice Luego SIN expandir los artilugios busca esta línea:
    ....como es?

    ResponderEliminar
    Respuestas
    1. esque como ahora han cambiado la manera de editarlo .. >.<
      Gomen u.u
      olvidate de la parte que dice SIN expandir los artilugios busca esta línea: .. y tu directamente .. busca lo que pone abajo ^^

      Eliminar
    2. holaa.ya lo he intentado pero no encuentro la linea y cuando pongo el nombre de lo que va en rojo el dibujito desaparece :(

      Eliminar