10 feb. 2011

Sígueme, Visítame !!!

De seguro has visto que este blog tiene dos botones al lado izquierdo que funcionan como enlace para visitar la pagina de "Los apuntes de Sega" en Facebook, o la cuenta de @aquiselastecno en Twitter, en esta entrada voy a mostrar como logre colocarlos.




Lo primero que debemos hacer es acceder a Blogger e ingresar en la pestaña "Diseño", luego damos click en "Añadir un Gadget". En la ventana que se despliega seleccionamos "HTML/Javascript".


Ingresamos cualquier titulo, aunque este aparecerá dentro del blog, en mi caso lo deje vació, no hay problema por esto, y para el caso de los botones "Follow Me" lo recomiendo.

Ingresamos el siguiente codigo (El código html que uso esta basado en el de esta pagina: Blog de la Web):

<div id="FollowMe">
<a style="top:45%;position:fixed;left:0px;z-index: 150;display:scroll;" href="http://www.twitter.com/tuCuentaEnTwitter" target="_blank">
<img src="http://www.algunSitio.DondeTengasUnaImagen.jpg" alt="Seguir a Los Apuntes de Sega en Twitter"/></a>
<a style="top:54%;position:fixed;left:0px;z-index: 150;display:scroll;" href="http://www.facebook.com/pages/TuPaginaEnFacebook/088084850205053" target="_blank">
<img src="http://3.bp.blogspot.com/tuLogoDeFacebook.png" alt="Seguir a Los Apuntes de Sega en Facebook"/></a>
</div>

Un poco sobre el anterior código: 

Dentro del div FollowMe existen dos etiquetas <a>, una para el enlace a facebook y otro para el enlace a Twitter, podrán notar que la etiqueta <a> sirve para crear enlaces. 

style sirve para definir características como la posición del enlace (botón)  y que este se mantenga siempre en la misma posición a pesar de que nos desplacemos por el blog
href es quizá la propiedad mas importante ya que indica la URL hacia la cual se debe dirigir una vez se haga click sobre el botón, así que debes reemplazar la URL http://www.twitter.com/tuCuentaEnTwitterhttp://www.facebook.com/pages/TuPaginaEnFacebook/088084850205053 por las direcciones que aparecen en el navegador a la hora de visitar tu cuenta en twitter y tu pagina en facebook.
target="_blank" permite que al hacer click en el enlace, las paginas se abran en una nueva pestaña o en una nueva ventana (depende del navegador).


Por ultimo la etiqueta <img> permite agregar una imagen, scr indica la fuente del recurso, navega por la web y encuentra la imagen que mas te guste y reemplaza http://www.algunSitio.DondeTengasUnaImagen.jpghttp://3.bp.blogspot.com/tuLogoDeFacebook.png por tus imágenes.
alt permite que se despliegue un mensaje en caso de que se posicione el ratón sobre la imagen.

1 comentario: