Tutoriales. Menú horizontal basado en etiquetas. Fase 3

Seguimos con el MENÚ HORIZONTAL DE BOTONES basado en ETIQUETAS.

Hola, hola, os tengo hartos, lo sé pero tampoco quiero hacer post tan larguísimos que cansen y entiendo que mucha gente esté un poquito pez en estos asuntos, prefiero que se lean post por post y en los comentarios vayan poniendo sus dudas, una vez aclaradas, estarán aptos para la siguiente fase, ahora estamos en la tercera. Terminando ya.

Para los que hayáis venido a esta sin ver las otras, os diré lo que en el anterior post.

(Si no lo viste y quieres saber sobre eso, el blog tiene un buscador, con poner tutoriales, os saldrán todos los que hemos posteado aquí y encontrarás el anterior a este o puedes buscarlo por fecha en los post y de paso, curiosea más cosas, que las hay muy buenas)

En la anterior fase nos habíamos quedado en que me íbais a preparar los botones y conseguir sus URLs correspondientes para empezar esta, tal vez última fase.

Bien, si ya tenemos las URLs, sigamos con este post, si no, a conseguirlas porque si no, no podréis realizar este paso.

Abramos nuestro PANEL DE CONTROL DE BLOGGER y vayamos a DISEÑO.
FOTO 1

AÑADIR UN GADGET

Le damos y se nos abre la ventana para elegir qué tipo de gadget queremos.

Daremos a HTML/JAVASCRIPT

Eso está muy bien.
Ahora biene lo bueno.

Le ponemos el nombre que queramos, yo puse BOTONES, jejeje.

Y dentro del gadget tenemos que poner los siguientes códigos:

No los que yo pongo, ahora os lo explico sobre la marcha.
Imaginemos que queremos poner 3 botones, bien.

<li><a href="AQUÍ TU BLOG//search/label/AQUÍ%20ETIQUETA" target="_blank"><img src="AQUÍ LA URL DEL BOTÓN"/><p></p></a><li>



<li><a href="AQUÍ TU BLOG//search/label/AQUÍ%20OTRA%20ETIQUETA" target="_blank"><img src="AQUÍ LA OTRA URL DEL OTRO BOTÓN"/><p></p></a><li>


<li><a href="AQUÍ TU BLOG//search/label/AQUÍ%20OTRA%20ETIQUETA%20MÁS" target="_blank"><img src="AQUÍ LA URL DEL BOTÓN QUE NOS QUEDABA"/><p></p></a><li></li></li></li></li></li></li>


Os explico  en AQUÍ TU BLOG tienes que poner la url de tu blog, por ej. http://matarilerilerile.blogspot.com/es

Ahora necesito que estéis lo más atentos posible al dato este.
Después de label/ donde pone AQUÍ%20ETIQUETA, como os doy los códigos ya medio preparados y no tenéis que buscar los correspondientes en otra parte, os comento que el espacio entre palabra y palabra de la ETIQUETA, se traduce a %20 en este caso, es decir, cada palabra de la ETIQUETA irá separada por %20.

Si la ETIQUETA FUESE:
Coches baratos hoy

después de label/Coches%20baratos%20hoy

No hace falta, si habéis separado la etiqueta en otro subtema mediante coma, poner el siguiente.
Ejemplo: Coches, Lola

después de label/Coches y ya está, el botón nos llevaría a todos los post etiquetados con la palabra Coches.

Como ya os dije, cada palabra de la etiqueta tiene que ir separada por %20 menos la última, esa ya irá cerrada por las comillas y lo siguiente del código que os puse arriba.

Parece lioso pero haciéndolo no lo es tanto, solo que yo me explico muy mal.

Bueno, tenido ya esto, guardamos el HTML.

Ahora debemos cambiarlo de posición en la ventana del panel de control de DISEÑO para ponerlo en el MENÚ HORIZONTAL, si lo dejásemos tal como está ahora, estaría en el MENÚ VERTICAL, lo mismo os gusta, eso ya, a vuestra elección.

Para ponerlo, es muy simple, lo arrastramos tal como la FOTO2

Luego, en la parte derecha de arriba vemos en naranja GUARDAR DISPOSICIÓN.

Lo guardamos y damos a VER BLOG o VISTA PREVIA antes de GUARDAR DISPOSICIÓN.

Puede suceder una cosa, si es así, no os perdáis el post de la semana que viene.

La cosa es, que en los lados de los botones os salgan unos puntitos negros, si es así, hago bien en dejar la solución para la semana que viene porque necesito que estéis muy centrados y este post ya va siendo largo.


Saludetes.