viernes, 25 de mayo de 2012

Complementos blogs: Globo Visitas

¡Buenas de nuevo artemaníacos! mmm espera, eso es de otro programa... bueno, sigamos...

Hoy os traigo, por petición expresa, un tutorial sobre cómo añadir complementos de códigos HTML o Javascript a tu blog en unos sencillos pasos y sin despeinarte demasiado... solo nos llevará 4 horas... ¡Que no! en unos minutillos lo tendrás hecho y sin levantarte de la silla.

Lo primero que tenemos que tener es un blog creado, esto es de cajón, si por complementos entendiste "ropa" este tutorial casi que no te va a ayudar. Nos apoyaremos en el servicio de blogs de la compañía Google o Blogger para adentrarnos en el maravilloso mundo de los complementos "addons, gadget o widgets" que nos permitirán añadir contenidos customizados o personalizados a nuestro blog.

Haz clic para agrandar

Como nos muestra la imagen, lo primero que debemos hacer es entrar en nuestra cuenta blogger y para ello nos logearemos o iniciaremos sesión con nuestros datos de usuario de google. Tras este delicado paso que prácticamente nunca sale a la primera por dislexia, falta de visión o tropiezo de dedos, entramos en lo que podríamos llamar "Panel de control del Blog" donde podemos ver los blogs que tenemos creados y los que seguimos entre otras cosas.


En este paso elegiremos el blog a modificar que nos interese (en nuestro caso "El Chapuzas de la Casa") y procederemos a hacer clic sobre la lista desplegable marcada como 3 en la imagen. Esta suministra un listado de las posibles tareas que se pueden realizar para configurar nuestro blog.


De entre las diversas opciones que se nos despliegan (desde aquí podemos controlar prácticamente todos los parámetros que rigen nuestro blog), nos centraremos en la que pone "Diseño". Hacemos clic en ella.


Nos aparecerá un esquema del diseño del blog con sus distintas columnas, cabecera, cuerpo y pie (como si fuera un diseño preliminar de una web Html). Conforme al tipo de diseño que hayamos elegido, la imagen puede variar según los casos pero no nos centraremos en eso ahora... sigamos haciendo clic en el botón "Añadir un gadget" en la zona del blog que más os convenga, yo he elegido la columna central izquierda.


Al hacer clic nos aparecerá una nueva ventana del explorador con un listado de los distintos gadgets que google suministra de manera gratuita divididos en categorías identificadas por pestañas, en nuestro caso, elegiremos la pestaña con la categoría "Lo básico" (es la que se nos muestra por defecto)


En dicha categoría desplazándose hacia abajo nos encontraremos con la el gadget "HTML/Javascript". Este gadget nos provee de una ventana en blanco para rellenar con lo que queramos pero escrito en lenguaje HTML y/o Javascrit. Como el código HTML no se aprende en un día (aunque es relativamente sencillo si lo comparamos con PHP), no nos vamos a centrar "de momento" en saber su funcionamiento. Una vez que hemos encontrado el complemento, lo añadimos pulsando en el icono "+"... lo que nos mostrará la siguiente imagen


Llegados a este punto, dejaremos esta ventana abierta pero minimizada. Como hemos dicho antes, se puede implementar cualquier código HTML con esta opción pero no hemos dicho de donde sacarlo. Hay infinidad de webs que muestran códigos para personalizar nuestro blog, desde contadores de visita pasando por calendarios hasta estados de servidores activos o lectores de archivos de música. Para que os sea más sencillo encontrar complementos os voy a suministrar algunas direcciones webs a tal efecto Euroresidentes,  CosasSencillas entre otras muchas que podéis buscar por Google. Nosotros nos centraremos en un contador de visitas que nos localiza el lugar de conexión del visitante y nos lo marca en un globo terráqueo animado, a este complemento se le conoce como "Revolver Maps" y podéis mirar su código en esta página: http://www.revolvermaps.com/


Abriremos una nueva pestaña en el navegador web con la dirección anterior y nos saldrá esta imagen. En ella podemos observar que nos pide el tipo de imagen que queremos adquirir (son complementos gratuitos), en nuestro ejemplo elegiremos la opción estándar para poder explicar mejor sus características opcionales añadidas. Haremos clic en "Get Standard Version"


Entre las distintas opciones, podemos elegir:
1- El tipo de globo mundial que más nos guste, mediante marcaje en su correspondiente casillero.
2- El tamaño de nuestro globo en píxeles (AltoXAncho)
3- El color de los puntos que señalan a los visitantes en el mapa (pudiendo elegir colores personalizados)


4- Opciones avanzadas: (mediante marcación/desmarcación de casilla)
     a. Opción de añadir un contador de visitas
     b. Muestra las visitas recientes y desde dónde se realizan
     c. Muestra las estrellas en el espacio
     d. Elección del color de fondo, entre las que se encuentran el transparente (dependiendo del tipo de        imagen funciona o no)

También se incluye una opción para elegir el tipo de código generado, en nuestro caso elegiremos el recomendado aunque ambos funcionan a la perfección en Blogger.

5- En este cuadro de texto se generará automáticamente el código HTML/Javascript de toda nuestra imagen de globo con las opciones anteriormente seleccionadas. Lo único que hay que hacer es seleccionarlo todo y copiarlo en el portapapeles.


Con el código ya copiado, volvemos a maximizar la ventana del explorador con la configuración del gadget HTML/Javascript... en la que pegaremos en el cuadro de texto cuyo texto superior es "Contenido" las líneas de código que anteriormente habíamos copiado. Quedándonos de la siguiente forma:


Añadiremos también un título al complemento (que posteriormente se mostrará en nuestro blog). Solo queda darle al botón de "Guardar" y posteriormente cuando volvamos a la pagina donde se muestra el diseño del blog, guardar los cambios introducidos haciendo clic en "Guardar Disposición". Salimos al menú principal de Blogger y entramos en nuestro blog... si todo ha salido bien, tendremos el globo funcionado como se puede observar en la siguiente imagen.


Hemos concluido el tutorial. Espero les haya sido grato y no demasiado pesado, he intentado explicarlo por pasos sencillos y medianamente bien explicados pero si os habéis quedado con ganas de más ¡no os preocupéis! cada semana se publicará un nuevo tutorial aquí en... "El Chapuzas de la Casa"


¡Hasta pronto Chapuceros!

No hay comentarios:

Publicar un comentario