30 agosto 2010 in Diseño Web, Redes Sociales by dacho

Hoy agregue un botón de Followme de mi Twitter fijo a la derecha y quería compartir con ustedes como lo hice. Es muy simple y útil a la vez porque siempre esta visible!

Boton Followme Twitter Fijo a la derecha o izquierda de tu blog

Pasos para Colocar el boton

Bueno, para colocarlo lo que debemos hacer en WordPress es ir a Apariencia > Editor y luego elegir el elemento Header.php (Cabecera en español), eso nos traerá la parte nuestro theme que tiene el codigo de “la parte de arriba” de wordpress. Buscamos una linea que dice: <body> o <body ……> y en la siguiente linea agregamos:


<div id="mitwitter">
<a style="top:50%;position:fixed;right:0px;z-index: 150;display:scroll;" href="http://www.twitter.com/[{tucuentadetwitter}]">
<img src="http://3.bp.blogspot.com/_ACL511Lh6M8/TF45w66z_qI/AAAAAAAAA0s/lyFQ72H8evE/s1600/twitter+follow+me+button.gif"/></a>
</div>

Para que te direccione a tu cuenta de twitter lo que tenes que hacer es reemplazar en el código donde dice: [{tucuentadetwitter}] por tu nombre de usuario

Y listo. Con este código agregaras el botón de la misma forma que lo tengo colocado yo en la derecha de mi blog, y la parte de arriba de nuestro botón exactamente en la mitad de la pantalla si lo vemos verticalmente.

Si te molesta o queres cambiar la posición que tiene verticalmente, lo que debes hacer es cambiar el porcentaje de la propiedad top: 50%; por lo que te parezca.

Por otro lado si lo que queres hacer es colocarlo a la izquierda del blog, tienes que cambiar right:0; por left:0; de la siguiente forma:


<div id="mitwitter">
<a style="top:50%;position:fixed;left:0px;z-index: 150;display:scroll;" href="http://www.twitter.com/[{tucuentadetwitter}]">
<img src="http://3.bp.blogspot.com/_ACL511Lh6M8/TF45w66z_qI/AAAAAAAAA0s/lyFQ72H8evE/s1600/twitter+follow+me+button.gif"/></a>
</div>

Para cambiar la imagen del botón, lo único que debes hacer es cambiar la dirección de la imagen (modificando el parámetro src=”aquí la dirección de la imagen” que esta dentro de la etiqueta img)

Este truco no funciona solo para WordPress, lo puedes utilizar para Blospot, Blogger o cualquier pagina web siempre que coloques el código a continuación de la apertura de la etiqueta body!

En estos días pienso agregar varios botones para que puedan personalizarlo con el botón que quieran y les sea mas fácil, así que si te interesa solo pidanmelo, y revisen el post para ver si hice el cambio. Espero les sea muy útil!

Entradas Relacionadas: