Tutorial para el blog: cambia las pestañas por un menú personalizado

Ya os expliqué aquí cómo insertar pestañas debajo de la cabecera del blog.Hoy, a petición de María, del blog Merimery, veremos cómo poner un menú personalizado.Lo bueno de ésta opción es que podemos diseñar los botones que funcionarán como menú, y así tenerlo todo unificado.Aquí os enseño tres ejemplos de menús que he hecho con fuentes, recortes de fondos e imágenes:

Si quieres descargarte estas imágenes, haz click aquí.

Para tener algo parecido, primero tenemos que crear las imágenes, banners, etiquetas... que queramos para nuestro espacio. 

MUY IMPORTANTE: El tamaño de las mismas debe de ser reducido. Dependemos del espacio que hay y de la cantidad de etiquetas. 
Ten en cuenta el color de tu plantilla, y si las imágenes que vas a utilizar son transparentes o tienen fondo blanco.

Una vez tenemos nuestros diseños, necesitamos las URL de las imágenes. Éstas se consiguen subiendo los archivos a una entrada o a algún espacio para subir imágenes (flickr, photobucket, google sites...). Una vez las hemos subido, vamos a crear los códigos HTML de cada una de ellas,pero no sin antes obtener la URL, pinchando sobre ella con el botón derecho del ratón, COPIAR URL DE LA IMAGEN.  Un consejo: abre una nueva entrada o un documento de word y redacta ahí cada código. Cuando los tengas todos, sólo tendrás que copiar y pegar.Deber tener en cuenta qué quieres enlazar en cada banner: secciones, etiquetas, entradas... copia el link y pégalo donde te indica.Código:<a href="pega aquí el enlace"1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="pega aquí la URL de la imagen" /></a>Cuando tengas todos tus códigos generados, ve a DISEÑO  e inserta un gadget HTML/HAVASCRIPT:

En la ventana que se te abrirá, pega todos los códigos sin espacios entre ellos, así, (y no te olvides de poner al principio este otro código: <center> para que quede centrado):<center><a href="pega aquí el enlace"1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="pega aquí la URL de la imagen" /></a><a href="pega aquí el enlace"1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="pega aquí la URL de la imagen" /></a><a href="pega aquí el enlace"1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="pega aquí la URL de la imagen" /></a><a href="pega aquí el enlace"1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="pega aquí la URL de la imagen" /></a>
Una vez pegada toda esta retahíla, guarda, y sitúa el gadget justo debajo de la cabecera de tu blog. No te olvides de GUARDAR SU DISPOSICIÓN.Si ya tenías pestañas instaladas, acuérdate de eliminarlas, porque no las sustituye.

Si lo cambiáis, avisadme. Me encanta ver cómo ponéis en práctica estos tutoriales. Y si publicáis una foto en Facebook, mejor que mejor.

Puedes compartir este tutorial en Facebook @Las Creaciones de Bea y Natalia,y en Twitter @CreacionesBNpara que llegue a más bloggers.
#TutorialDelDomingoFacebook ´´ Pinterest ´´ Twitter