Menú vertical con imágenes



Hoy os voy a explicar cómo hacer un menú vertical para el blog con imágenes.

Lo primero que tenéis que hacer es tener claro qué secciones vais a utilizar: tutoriales, ilustraciones, imprimibles, descargas etc. Y también tener seleccionadas las imágenes que van a representar cada una de las secciones.

También es primordial, tener tus entradas del blog clasificadas por etiquetas. Cada vez que realizas una entrada, debes incluir una etiqueta principal porque eso servirá para agrupar las etiquetas principales y así crear tu menú con imágenes y también otras que consideres que están relacionadas con el post.



Te vas a Diseño y agregas un gadget de etiquetas.



Marcamos Etiquetas seleccionadas y desplegamos Editar:



Después de guardar las etiquetas vamos a nuestro blog para localizarlas.Si damos clic sobre una etiqueta, vemos que salen todas las entradas que contienen el nombre de esa etiqueta. Por ejemplo, yo le he dado clic a la etiqueta Conociendo a... y al principio de todo me aparece esto:



Abrimos un blog de notas y copiamos la dirección del navegador.

Nos vamos a Diseño y agregamos un gadget de imagen



Después de guardar, nos vamos a diseño y movemos el gadget en el lado que queramos que aparezca nuestro menú. Ya tenemos la primera categoría con imagen en nuestro menú.

Esta operación es la misma para todas las categorías que queramos colocar.

En resumen, estos son los pasos a seguir:



****************************************************************************

Hasta aquí bien, pero... ocurre una cosa, y es que al añadir varios gadgets de imágenes para cada etiqueta, comprobaréis que quedan muy separados unos de otros. Entonces, esto particularmente, a mí no me gustaba nada. Yo quería verlo así, más juntito:



Entonces ¿cómo lo hice? pues más fácil todavía. Me fuí a una entrada nueva de blog.



Añades la imagen de una categoría. Seleccionas y le das a Enlace. Seleccionas de nuevo y cuando se ponga en azul le das otra vez a Enlace. Y aparecerá esto:



Se copia la dirección de su categoría que tenemos copiado en el blog de notas y aceptamos.

Añadimos la imagen de la siguiente categoría y hacemos la misma operación. Así con tantas categorías como queramos poner.

Cuando terminemos, le damos arriba a HTML y os aparecerá el código completo de todas las imágenes que habéis colocado con sus enlaces. Seleccionáis todo el código y le dais a copiar con el botón derecho del ratón.

No borréis la entrada, la guardáis por si tenéis que rectificar.



Ahora nos vamos a Diseño y añadimos un gadget HTML Javascript y lo pegáis dentro. Aceptas y guardas configuración.

Y ya te debe salir igual que en la entrada, más juntito todo.

Como véis yo lo he hecho en base a una imagen en concreto, y he tenido que poner las imágenes divididas por orden para completar el puzzle. Eso es más complejo puesto que lo he hecho por gusto con el programa de diseño. Pero si no os queréis complicar, hacedlo con imágenes diferentes para cada categoría.

Como yo lo tengo, queda muy chulo, pero también os digo que me dió un poco la lata hasta que me salió.

¿Qué os parece? no es nada difícil, solo es ponerse y veréis qué chulo queda!



Fuente: este post proviene de Marga Desing, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cuando era "novata" en esto de internet, flipaba de las cosas que la gente sabía hacer y que para mí eran super difíciles. Me preguntaba ¿y cómo habrá hecho ésto? ¿y esto otro? pero luego.. ...

Hace poco me formatearon mi portátil y cual fue mi sorpresa que a los días siguientes me salía el dichoso mensaje de que tenía que validar Windows 7. Claro, supuse que el windows 7 que me habían inst ...

Para los que trabajamos con programas de diseño, como el Paint o el Photofiltre, nos es más fácil hacerlo con imágenes con formato PNG o JPG, que con PDF. Muchas veces, a la hora de descargar cosillas ...

Recomendamos

Relacionado

general desde0

El menú en un blog sirve para organizar los contenidos que éste contiene en categorías que se le puedan mostrar al usuario para que navegue por ellas sin dificultad. La ventaja de utilizar un menú es que a parte de facilitar el acceso a tu información, la estructuras y ordenas de una manera lógica. Esta guía te explica paso a paso con todo lujo de detalles cómo poner un menú de una manera sencilla ...

desde0

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

propuestas

Hemos visto cómo crear sencillos pero útiles menús para Blogger en Diarios de la nube con los que organizar y exponer los contenidos a nuestros visitantes. Con el tiempo, la forma de mostrar estos menús han ido evolucionando hasta llegar a una nueva presentación que se realiza a pantalla completa. Los menús de pantalla completa están cobrando un fuerte protagonismo en los diseños de presentación d ...

general desde0

La creación de páginas en Blogger te permite darle valor añadido a tu Blog más allá de los contenidos que puedes proporcionar a través de sus entradas. Normalmente se utilizan las entradas para desarrollar la temática habitual del Blog, las entradas con la que transmitimos la información propia del día a día que nuestra creación web. Pero, ¿y si queremos hacer una página de contacto?, ¿cómo podemo ...

general

La creación de menús en páginas web es fundamental para la estructuración de la información a la que los usuarios pueden acceder. En los Blogs, al igual que en cualquier publicación web, el orden y la presentación de las categorías de la información que manejamos puede ordenarse mediante un menú. La exposición de contenidos mediante un menú facilita a los usuarios el acceso a la información, consi ...

Seo y plugins etiqueta alt optimizar imagenes pasa seo ...

Última modificación: 06-05-2022 1.- La importancia de las imágenes en el posicionamiento SEO En este artículo, se explica todo sobre los atributos alt y los atributos title de una imagen y por qué debería optimizarlas. La optimización de imágenes en tu wordpress te ayudarán a posicionar mejor. Mira este video de una web real y como posiciona únicamente por la etiqueta alt de la imagen: 2.- SEO: e ...

general

El conocimiento de la plantilla de Blogger, abre nuevas posibilidades en el diseño y desarrollo de los Blogs. Hasta ahora es posible que hayas utilizado esta magnífica herramienta de Google a un nivel básico: crear una entrada, añadir imágenes, añadir algún "gadget"... ¿pero y cuándo deseas ir más allá y conocer cómo funciona?, ¿qué es cada etiqueta que conforma la plantilla de Blogger?, ...

general lo básico de... etiquetas ...

La última versión de Gmail, la V 5.0 trajo grandes mejoras en la joya de la corona de Google, con permiso de Google Now. No pretende este post sino dar un repaso detallado a todas las opciones para que puedas configurar Gmail a tu gusto, lo más ajustado posible a tus necesidades con el menor coste en recursos para tu dispositivo. Resumen para los AnsiaViva Revisa los ajustes y reduce el consumo. ...

Recursos Slider gratis ...

(Recursos) –  Para quienes trabajan en diseño gráfico, social media o simplemente necesitan descargar imágenes gratis, saben los complicado que es encontrar una buena imagen con licencia Creative Commons también se sabe que utilizar imágenes de terceros sin una respectiva autorización puede conllevar a problemas legales y por ende a la indemnización de la persona quien ese dueña de la imagen ...

general etiquetas filtros ...

Como ya he mencionado en posts anteriores Inbox by Gmail permite crear nuevas etiquetas y filtros y es este post lo explico con todo detalle Etiqueta personal El funcionamiento de las etiquetas personales es idéntico a las de categoría con la peculiaridad de que en las personales puedes crear filtros y en las de categoría ya vienen definidos. Para crear una nueva etiqueta entra al menú lateral y d ...