Este blog está dedicado a quienes, al igual que yo cuando empecé, se sienten más perdidos que un pulpo en un garage al pinchar en algún sitio de su blog.

viernes, 7 de agosto de 2009

El elemento HTML/Javascript

Este elemento, o gadget sirve para muchas cosas.
Principalmente podemos colocar en él los códigos que nos proporcionan algunos sitios para poder tener en nuestro blog, contadores, videos, etc.
Pero también puedes usarlo para poner imágenes o textos y enlaces a cualquier sitio mediante ese texto o esas imágenes.

Y como el movimiento se demuestra andando y una imagen vale más que mil palabras, aquí están las imágenes paso a paso de como usar un gadget de esos para poner un texto con un enlace o una imagen que sirva de enlace a tu dirección de correo.

Empezaremos por ir a Diseño y pinchar en Añadir un gadget, de la columna lateral.
De la lista de gadgets que sale escogeremos HTML/Javascript.
Veremos ésto:


Pinchando en estas letras que se ven en naranja, (al poner el ratón encima, pues se ven en azul normalmente), que dicen Formato RTF se ve así:


Como ves, hay más herramientas arriba, ya que se ha convertido en un editor de textos normalito, aunque muy simple. Puedes escribir en el recuadro e incluso añadir un enlace a tu texto, de la misma forma que en cualquier editor, simplemente seleccionas el texto que servirá de enlace y pinchas en la bola.


Saldrá esta ventanita para que añadas el enlace. Este http:// lo verás en azul, como seleccionado. Si pinchas al lado se pondrá así y podrás escribir el resto de la dirección. Recuerda que no has de escribir eso que ya está ahi, o la dirección no funcionará.

Pero si en lugar de escribirla quieres pegarla, porque la has copiado previamente, dale a la tecla retroceso de tu teclado para que borre ese http:// y la barra para escribir la dirección quede vacía...


Y pega ahí la dirección.


En cuanto le des a Aceptar, el enlace quedará colocado y las palabras usadas se verán así:


Si quieres que ese enlace se abra en otra ventana, pincha en Edición de HTML...


Verás el código de lo que hayas escrito, con el enlace allí colocado.


Añades eso de target="_blank" después de las comillas de la dirección del enlace, dejando un espacio antes de ponerlo y cuando alguien pinche en este enlace se abrirá en una ventana nueva.


Ahora vamos a usar este mismo gadget para poner una imagen y luego haremos que enlace a tu dirección de mail.
En este caso hemos de hacerlo directamente en Edición de HTML, o sea, en el gadget tal y como se abre cuando lo añades.
Empecemos por poner la imagen. Escribes la dirección así como se ve aquí.
Los cambios de línea los decide el sistema en base a lo larga que sea la dirección. Tu has de escribirlo seguido así: <img src="aqui la dirección de la imagen">


Si pinchas en Formato RTF verás la imagen que has colocado.


Pero, si te fijas, verás que se ve a la izquierda del todo. Quizá prefieras que se vea centrada. En este caso, vuelve a pinchar en Edición de HTML y añade esos center que ves aquí.


Fíjate que hay dos, ambos entre simbolos. Uno al principio de todo y otro al final y que el del final tiene, además una barra inclinada delante de la palabra center.
Esta barra inclinada es la orden de cierre.
De esta forma le estás diciendo que centre esta imagen y cierras la orden al final. Así, si quisieras seguir escribiendo, el resto saldría bien colocado a la izquierda.

Y como puedes ver la orden se cumple.


Ahora añadiremos el enlace a la dirección de correo.
Puedes seleccionar la imagen, cuando estás viéndola así y añadir el enlace en la ventanita que se abre para añadir direcciones.
En éste caso has de borrar lo de http:// y escribir mailto:dirección evidentemente poniendo la dirección de correo en lugar de la palabra dirección que he escrito yo...

...o escribir el enlace directamente en el HTML tal como ves aquí.

Fíjate como se escribe un enlace: <a href="enlace">lo enlazado, ya sea imagen o texto</a>
Fíjate también que la orden /center sigue estando al final de todo y que la /a se ha colocado delante de ella. Esto es así porqué las órdenes se han de cerrar en orden inverso al que tienen al principio.

Si además quisieras que al poner el ratón encima de la imagen se viera un texto, en Edición de HTML has de añadir eso que ves aquí.


O sea, detrás de las comillas que cierran el enlace, dejas un espacio y escribes: title="palabras que quieras que se vean"
En este caso he escrito Contáctame.

Volviendo a Formato RTF ya se puede ver el efecto al poner el ratón encima de la imagen.


Y una vez guardado el gadget, así se ve en el blog.

Al poner el ratón encima, además de verse la leyenda también se ve lo enlazado en la barra de estado, esa barra blanca que hay abajo de todo de la página, en la ventana del navegador.


Donde, como puedes comprobar, se ve el enlace que hay en la imagen de arriba.
Si quiseras añadir más imágenes, solo has de repetir el proceso en el mismo gadget, añadiendo, detrás/debajo de lo que haya, el nuevo código para que se vea la otra imagen.
Puedes añadir todas las que quieras. Solo ten en cuenta que cuantas más añadas más largo será el gadget.

8 respuestas. Y a ti ¿te ha sido útil?

★εïз Viki εïз★ dijo...

wooow era justo lo que necesitaba !

INSTALA, plomeria, Electrico y Ferreteria dijo...

YO UTLICE UNO
BADGETS DE TEXTO Y USE ARTILUGIOS QUE LEI POR AHI, PARA QUE FUNCIONARA COMO MI PAGINA DE INICIO, PERO DESCUBRI QUE ERA MUY LIMITADO PARA PONER EL DISEÑO QUE YO QUERIA APARTE QUE NO SE MUCHO DE HTML, A SI QUE PENSE EN HACER ENTRADA DE PRESENTACION Y HACER QUE MI BADGET DE INICIO ME MANDARA AUTOMATICAMENTE A ESA ENTRADA DE PRESENTACION... PERO NO HE PODIDO, LE PONGO EL HTML QUE SE SUPONE ME MANDA, Y NO LO ACEPTA, ES MAS LO BORRA? QUE ME ACONSEJARIAS HACER PARA TENER ESE EFECTO?

margarita dijo...

Eulalia, hola perdona pero por Dios que me cuesta entender, soy mayorcita y uffffff que dificil lo veo.Pero te quiero preguntar de donde saco esos dibujitos que tú pones (creo que se llaman vectores) para hacer más entretenido el blog por ej. como el elefantito, algo así. Chao

Eulalia dijo...

Hola Margarita:
Los dibujitos que a veces coloco en los blogs los suelo encontrar en la red. Busco Dibujitos y si alguno me gusta me lo descargo. Suelen ser gifs, por eso tienen movimiento.
Saludos.

Anabel dijo...
Este comentario ha sido eliminado por el autor.
David dijo...

Realmente me ha ido genial toda la explicación sobre códigos HTML para crear nuestros propios gatges HTML javascript, no tenía ni idea y me ha resultado sencillisimo, con foto, enlace y texto con el ratón....más competo imposible, muchas gracias!!!!

♥ Ana dijo...

Hola Eulalia, hace mucho que no te visitaba y quizás ni leas mi comentario
Solo decirte que me ha venido genial ésta entrada tuya para un blog de una amiga en el que le he puesto un gadget Html con enlace y con imagen, y ha quedado perfecto.
Como ves, a pesar de los cambios que ha hecho Blogger, yo sigo aprendiendo de tus blogs como llevo haciendo desde que empecé en éste mundillo hace ya 5 años y es que, lo explicas todo genial
Muchísimas gracias

Eulalia dijo...

Me alegra saber que aún sirven de algo, Ana. El dia que esto deje de ser así, los deje del todo :)
Saludos.