Hola a tod@s! Vuelvo a la carga con otro tutorial, que es un pedido de mi nechan Chibilina, de como poner links en nuestras cabeceras siendo imagenes ( no me se explicar XD), resumido: como hacer una cabecera como la mía, con los links integrados.
Es muy sencillo, y se tardan pocos minutos en hacerlo según los links.
PD: Esta cabecera es algo pocha, ya que la he hecho a lo rápido para este tutorial, vosotros seguro que la haréis mejor XD
Una vez estemos, le daremos Upload Image from your PC, o si la tenéis en un host de imagenes, From a URL:
Una vez subida nuestra imagen, nos saldrá esta pagina:
Le damos a Continue to next Step.
Vamos a la columna de la derecha, y le damos a Rectangle:
Vereis que al darle, en nuestra cabecera ha salido un rectángulo:
Este rectángulo, lo tenemos que arrastrar hasta el texto al que le queremos poner link. Una vez puesto, rellenamos Link for this map, donde pondremos la URL que queremos para ese texto:
Una vez lo tengamos le damos a SAVE, y repetimos el mismo proceso para los demás links:
Una vez le demos, nos saldrá una pagina, donde podremos elegir el código que queremos que nos de, nosotros clicaremos en la pestaña de HTML Code:
Y copiamos el código que nos da:
La parte que nos interesa, es donde pone header- wrapper, ya que ahí, es donde esta nuestra cabecera. Para ponerla, borramos todo lo que haya entre header wrapper hasta que quede un< / div >, este seria el ejemplo:
Es muy sencillo, y se tardan pocos minutos en hacerlo según los links.
Step 1
Necesitamos tener nuestra cabecera hecha, con el menu hecho en imagen, como esta de aqui:
PD: Esta cabecera es algo pocha, ya que la he hecho a lo rápido para este tutorial, vosotros seguro que la haréis mejor XD
Step 2
Abrimos nuestro navegador de Internet, y vamos a Image-Maps, la pagina que nos permitirá hacer nuestra cabecera.Una vez estemos, le daremos Upload Image from your PC, o si la tenéis en un host de imagenes, From a URL:
Una vez subida nuestra imagen, nos saldrá esta pagina:
Le damos a Continue to next Step.
Step 3
Cuando nos cargue la pagina, nos saldrá a la izq. nuestra cabecera, y a la derecha, una columna que nos servirá para poner los links.Vamos a la columna de la derecha, y le damos a Rectangle:
Vereis que al darle, en nuestra cabecera ha salido un rectángulo:
Este rectángulo, lo tenemos que arrastrar hasta el texto al que le queremos poner link. Una vez puesto, rellenamos Link for this map, donde pondremos la URL que queremos para ese texto:
Una vez lo tengamos le damos a SAVE, y repetimos el mismo proceso para los demás links:
Step 4
Una vez estén todos los links puestos, vamos a la columna de la derecha y clicamos en Get Your Code:Una vez le demos, nos saldrá una pagina, donde podremos elegir el código que queremos que nos de, nosotros clicaremos en la pestaña de HTML Code:
Y copiamos el código que nos da:
Step 5
Una vez tenemos el código, vamos a nuestro Blog > Diseño> Edición de HTML, y bajamos hasta encontrar este código:La parte que nos interesa, es donde pone header- wrapper, ya que ahí, es donde esta nuestra cabecera. Para ponerla, borramos todo lo que haya entre header wrapper hasta que quede un< / div >, este seria el ejemplo:
< div id = header wrapper >
el texto que hay que eliminar
< / div >
< / div >
Una vez eliminada esa parte, pegamos el código que obtuvimos antes en imagemaps:
Una vez copiado, eliminamos la parte del código que he puesto en color:
Y el código quedara así:
Ahora le daremos a Vista previa y nos aseguraremos de que se ve nuestra cabecera. Y ya solo nos queda ver nuestro blog y comprobar que están puestos los enlaces.
Resultado
Visita mi Blog de Pruebas
¡Guala!Ya tenemos nuestra cabecera con nuestro menú personalizado. Espero que os haya sido útil y cualquier duda no dudéis en poneros en contacto conmigo. Ja nee (L)
PD: El diseño del menú podéis hacerlo como os plazca, no influirá a la hora de poner los links ^^.
0 comentarios:
Publicar un comentario