Menú desplegable en Plantilla o Tema de Blogger

Personalización de menú desplegable en plantilla Phorto

Continuando con el tema de plantillas en Blogger, veremos como hacer una personalización del menú para que nos aparezcan las divisiones de temas que deseemos para nuestro blog. Así, cuando algún visitante quiera ver los artículos que estén relacionados con alguna temática en especifico pueda visualizarlos sin necesidad de estar buscando entre todas las entradas.

En la siguiente imagen podemos ver las opciones de menú definidas de manera predeterminada en la plantilla Phorto del sitio soratempletes. Vamos a cambiarlas para que nos muestre las opciones que deseamos.

Pasos para personalizar el menú de la plantilla

Nos vamos a Diseño y daremos a Editar en la sección “Main Menu”

Veremos el siguiente menú para configurar la lista de vínculos en donde podemos hacer lo siguiente:

• Darle un nombre a nuestra lista.

• Mostrar cuantos elementos se visualizarán en el menú. Dejamos en blanco si queremos que todo lo que coloquemos como vinculo se muestre o solo se muestre una determinada cantidad. Por ejemplo: tienes 10 vínculos y colocas que se muestren 7, solo se mostraran los 7 primeros y los últimos 3 quedaran ocultos a los usuarios hasta que tu habilites que se muestren.

• Ordenar la lista de vínculos.

Lo que nos interesa es “La lista de vínculos” que es donde vamos a realizar los cambios para personalizar nuestro menú. De manera predeterminada la plantilla Phorto nos muestra los siguientes: 

Vamos a eliminar todas las opciones o puedes renombrarlas dándole editar, pero considero que es más rápido eliminar todas. Solo llego a conservar la de Home porque será una manera que nuestros usuarios regresen a la página principal. 

Los vínculos ya visualizados en el sitio web se van a ordenar de izquierda a derecha, en cambio, en nuestro menú de edición de lista de vínculos el orden es de arriba hacia abajo; por lo que si quiero que un vínculo este más a la izquierda en la página web debo de colocarlo en las partes superiores del menú de edición.

Veamos las herramientas que tenemos en esta área de lista de vínculos, de izquierda a derecha:

• Flecha hacia arriba: nos permitirá mover un vínculo un espacio arriba.

• Flecha hacia abajo: nos permitirá mover un vínculo un espacio abajo.

• Lápiz (editar): para poder editar el vínculo.

• Bote: para eliminar el vínculo.

Procederemos a crear nuestros vínculos. Como ven solo me quedo con “Home”.

Voy crear los vínculos dando clic en “Agregar un nuevo elemento”

Veremos las opciones agregar titulo y la URL.

En los vinculos se establecen las categorias (menus y submenus) a traves de un guión bajo “_”, de la siguiente manera:

• Nombre sin guiones: sera el que nos aparecera en la cabecera del menú. Para este caso “Informes”

• Guion bajo seguido de nombre: sera el primer submenu. Ejemplo: “_Comunicado”   

• Dos Guiones bajos seguido del nombre: sera el menu del submenu anterior. Ejemplo: “__Enero”

Como podemos ver en la siguiente imagen “Informes” será la pestaña principal en el menú; “Comunicado” es la división que se desplegara al seleccionar informes; y “Enero” será lo que se mostrara al seleccionar comunicado. 

Cada guion bajo “_” nos establecerá un nivel de categoría. Si queremos un submenú de alguna opción llevar un guion bajo o más dependiendo del nivel que corresponda; de manera predeterminada en la plantilla Phorto solo podemos colocar hasta 2 guiones bajos para ordenar de forma escalonada.

Si intentamos 3 guiones bajos se pierde el orden como en la siguiente imagen en donde a manera de ejemplo buscamos que tuviera un submenú al seleccionar enero, pero solo se coloca la "___Primero" en el mismo nivel.

Recordemos que el menú de edición de la lista de vínculos cada submenú debe de estar ubicado debajo de su menú principal. Por ejemplo: vimos que de la pestaña “Informes” tenia “comunicado” como submenú, para eso cree “Estrenos” y lo coloque debajo de informes con las herramientas de flechas. Ahora nos aparecerá “comunicado” como submenú de “Estrenos”.

Por lo que el menú lo podemos ordenar con ayuda de las flechas, solo debemos ubicar cada elemento en orden de escalera para que se desplieguen los submenús como deseamos. Eso si, no olvides el guion bajo “_” antes del nombre de cada submenú, o 2 guiones bajos para que sea el submenú del submenú.

Como colocar la URL 

Cuando le damos a editar a algún vinculo de la lista veremos la sección de URL, aquí podemos colocar tres cosas:

• / : será para dirigirnos a nuestro home

• # : si queremos que al dar clic no haga nada. No se ejecuta nada, o mejor dicho se queda en el lugar en donde estaba.

• url : si ingresamos una url al dar clic seremos dirigidos al sitio que le indicamos.

Hasta este punto te preguntaras: ¿Cómo hago para que se muestren las entradas para un determinada categoría del menú que puse? Todo dependerá de las etiquetas que colocaste en las entradas (en otro post hablaremos de ellas a profundidad), estas nos servirán para hacer la clasificación cuando hagamos clic en alguna de las opciones de nuestro menú.

Por ejemplo en la siguiente imagen puedes ver cuales etiquetas coloque para esta entrada del blog. Utilizaremos la etiqueta de comunicado para que solo nos muestre las entradas que tienen esta etiqueta.

Obtención de la URL

Para obtener la URL vamos a abrir nuestro blog.

Entramos a la entrada objetivo (la que tenga la etiqueta que queremos) y nos vamos hasta la parte inferior o donde nos aparezcan las etiquetas (tags) de la entrada. 

Le vamos a dar clic en la etiqueta y veremos que nos mostrar una pantalla con las entradas que tienen esa etiqueta

Lo que nos va a interesar es la URL que tiene, por lo que la vamos a copiar solo hasta donde muestra el nombre de la etiqueta. Para este ejemplo seria:

https://merk-aba-shiloh.blogspot.com/search/label/comunicado

Esto es lo que vamos a pegar en la sección URL de la edición de vínculo. Le daremos guardar para que se queden los cambios.

Con esto ya estaría, cada vez que hagas clic en una categoría del menú en la cual ya hayas ingresado la URL respectiva, te mostrara las entradas que tengan esa etiqueta.

Si no quieres dar toda la vuelta anterior para buscar la URL de la etiqueta, la forma en que se constituye la URL de la etiqueta es:   

https://nombredelsitio/search/label/nombredelaetiqueta

Por lo que solo sustituiremos el nombre del sitio por el nuestro y el nombre de la etiqueta.

Por ejemplo si mi sitio se llama “gatoredondo.blogspot.com” y quiero la url para la etiqueta “collares” , quedaría de la siguiente manera:

https://gatoredondo.blogspot.com/search/label/collares

Esperamos que esta información les sea de utilidad. No se pierden los siguientes contenidos.