Como insertar un menú(Desplegable) en CSS a un Tema(Contempo) de Blogger
Primero que nada realiza una copia de seguridad por si acaso. En el menú de la izquierda haz clic sobre Tema y arriba en la parte derecha de la pagina hay un botón que dice "Crear/restablecer copia de seguridad" clic hay.
No soy un experto en editar Temas de Blogger, pero compartiré todo lo valla aprendiendo y aplicando a este blog.
Para agregar tu propio menú (A mi no me gusto la lista de paginas) al blog sigue los siguientes pasos:
1: Añadir gadget HTML/Javascript al tema o plantilla Contempo de Blogger.
-Clic sobre Diseño en el menú de la izquierda. Luego haz clic en "Añadir un gadget".
-Buscar el gadget HTML/Javascript y clic sobre el mismo para agregarlo.
Si te aparece la ventana emergente de "Configurar HTML/Javascript" pega el código HTML del menú editado y luego lo posicionas.
Si te aparece la ventana emergente de "Configurar HTML/Javascript" pega el código HTML del menú editado y luego lo posicionas.
-Luego arrastras el gadget HTML/Javascript a la posición donde quieres que aparezca, yo lo he dejado arriba de los anuncios y después de la Cabecera.
2: Agregar código HTML del menú al tema o plantilla Contempo de Blogger.
-Clic sobre el icono de lápiz que esta en el gadget HTML/Javascript al lado derecho.
-Pega tu menú editado en el cuadro de contenido de la ventana emergente del gadget HTML/Javascript y Guardar.
-Copiar y edita el siguiente código HTML ajustándolo a tus necesidades. A continuación una pequeña explicación.
Supongamos que estas creando un menú con tres opciones que serian Inicio, Música y Humor.
El código HTML seria el siguiente:
<ul id="menud"> <li><a href="https://URL_DE_TU_BLOG">Inicio</a></li> <li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Música</a></li> <li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Humor</a></li> </ul>
Ahora quieres agregarle al menú Música varios géneros, esto lo ases insertando una lista
antes del cierre del ítem Música </li> con las opciones que quieres agregar. por ejemplo:
<ul id="menud"> <li><a href="https://URL_DE_TU_BLOG">Inicio</a></li> <li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Música</a> <ul> <li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Rock</a></li> <li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Pop</a></li> <li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Jazz</a></li> </ul> </li> <li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Humor</a></li> </ul>
Ya sabes como agregar un sub menú a las opciones del menú. Pero ahora quieres agregar otro sub menú dentro del sub menú y solo tienes que hacer lo mismo que en el paso anterior agregando una lista dentro del ítem al cual quieres agregarle mas opciones. Por ejemplo en el menú Humor tienes las opciones Vídeos, Imágenes y Chistes, pero quieres dividir los chistes en varias categorías como Borrachos, Suegras, Feministas, Machistas y Otros. El código HTML quedaría de la siguiente manera:
<ul id="menud">
<li><a href="https://URL_DE_TU_BLOG">Inicio</a></li>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Musica</a>
<ul>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Rock</a></li>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Pop</a></li>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Jazz</a></li>
</ul>
</li>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Humor</a>
<ul>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Videos</a></li>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Imagenes</a></li>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Chistes</a>
<ul>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Borrachos</a></li>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Suegras</a></li>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Feministas</a></li>
<li><a href="https://URL_DE_TU_BLOG/search/label/TU_ETIQUETA">Machistas</a></li>
</ul>
</li>
</ul>
</li>
</ul>
De esta manera puedes agregarle sub menús a cualquier opción del menú, he anidado hasta
4 listas y si necesitas mas puedes probar para verificar si se pueden anidar mas de 4
listas.
Sustituye URL_DE_TU_BLOG por la dirección url de tu blog y TU_ETIQUETA por la etiqueta que hallas elegido para esa categoría. Por ejemplo el enlace para el menú Borrachos de Chistes seria https://mi-blog.blogspot.com/search/label/borrachos y para agregar las etiquetas a las entradas de tu blog solo tienes que insertarlas en la caja de texto que puedes encontrar en la parte derecha del editor de entradas abajo de Etiquetas, si quieres agregar mas de una etiqueta a tu entrada separarlas con comas.
-Pega tu menú editado en el cuadro de contenido de la ventana emergente del gadget HTML/Javascript y Guardar.
3: Insertar código CSS del menú al tema o plantilla Contempo de Blogger.
Aquí te dejo el código CSS del menú que utiliza este blog.
Para que no te líes insertando el código CSS en el código HTML del Tema ve a Tema>>Personalizar>>Avanzado>>Añadir CSS y pega el código en la caja de texto que dice "Añade CSS aquí" y clic en "Aplicar al blog" en la parte superior derecha de la pagina:
Código CSS del menú:
Los siguientes pasos no son necesarios si pegaste el código CSS en Tema>>Personalizar>>Avanzado>>Añadir CSS. Los dejo aquí solo para aquellas personas que como a mi les gusta hurgar en las tripas del código HTML de Blogger.
-Ir a la opción Tema del menú de la izquierda. Abajo de las dos miniaturas o vistas previas de tu blog veras dos botones uno dice "Personalizar" y el otro "Editar HTML" clic en este ultimo.
Para que no te líes insertando el código CSS en el código HTML del Tema ve a Tema>>Personalizar>>Avanzado>>Añadir CSS y pega el código en la caja de texto que dice "Añade CSS aquí" y clic en "Aplicar al blog" en la parte superior derecha de la pagina:
Código CSS del menú:
#menud {margin: 0 auto; padding: 0; background:#aca7a7;}/*Color del fondo del menu*/
#menud ul {
float: none;
margin: 0;
padding: 0;
overflow: visible;
}
#menud li a, #menud li a:link, #menud li a:visited {
font: normal normal 16px Arial; /*Tamaño y tipo de fuente de las pestañas */
color: #666666; /*Color del texto de las pestañas*/
display: block;
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#menud li a:hover, #menud li a:active {
color: #cccccc; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#menud li li a, #menud li li a:link, #menud li li a:visited {
font: normal normal 16px Arial; /*tamaño y tipo de fuente de los submenus*/
background: #eeeeee; /*Color del fondo de las subpestañas*/
width: 150px; /*Ancho de los submenus*/
color: #333333; /*Color del texto de los submenus*/
float: none;
margin: 0;
padding: 7px 10px;
}
#menud li li a:hover, #menud li li a:active {
background: #ffffff; /*Color del fondo de los submenus al pasar el ratón por encima*/
color: #222222; /*Color del texto de los submenus al pasar el ratón por encima*/
padding: 7px 10px;
}
#menud li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#menud li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#menud li ul a { width: 140px; }
#menud li ul ul { margin: -32px 0 0 171px; }
#menud li:hover ul ul, #menud li:hover ul ul ul, #menud li.sfhover ul ul, #menud li.sfhover ul ul ul {left: -999em; }
#menud li:hover ul, #menud li li:hover ul, #menud li li li:hover ul, #menud li.sfhover ul, #menud li li.sfhover ul, #menud li li li.sfhover ul { left: auto; }
#menud li:hover, #menud li.sfhover {position: static;}
Los siguientes pasos no son necesarios si pegaste el código CSS en Tema>>Personalizar>>Avanzado>>Añadir CSS. Los dejo aquí solo para aquellas personas que como a mi les gusta hurgar en las tripas del código HTML de Blogger.
-Ir a la opción Tema del menú de la izquierda. Abajo de las dos miniaturas o vistas previas de tu blog veras dos botones uno dice "Personalizar" y el otro "Editar HTML" clic en este ultimo.
-No te asustes con esa maraña de código yo te diré exactamente donde pegar el código CSS. Clic en el cuadro de código de tu tema. Pulsa Ctrl+f y escribe "</head>" sin comillas en la caja de texto alado de "Search:" que apareció en la parte superior derecha en el cuadro del código del tema y después Enter. Copiar el código de aquí abajo y pegarlo antes de </head> y Guardar Tema.
Código CSS del menú:
<style type="text/css">
#menud {margin: 0 auto; padding: 0; background:#aca7a7;}/*Color del fondo del menu*/
#menud ul {
float: none;
margin: 0;
padding: 0;
overflow: visible;
}
#menud li a, #menud li a:link, #menud li a:visited {
font: normal normal 16px Arial; /*Tamaño y tipo de fuente de las pestañas */
color: #666666; /*Color del texto de las pestañas*/
display: block;
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#menud li a:hover, #menud li a:active {
color: #cccccc; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#menud li li a, #menud li li a:link, #menud li li a:visited {
font: normal normal 16px Arial; /*tamaño y tipo de fuente de los submenus*/
background: #eeeeee; /*Color del fondo de las subpestañas*/
width: 150px; /*Ancho de los submenus*/
color: #333333; /*Color del texto de los submenus*/
float: none;
margin: 0;
padding: 7px 10px;
}
#menud li li a:hover, #menud li li a:active {
background: #ffffff; /*Color del fondo de los submenus al pasar el ratón por encima*/
color: #222222; /*Color del texto de los submenus al pasar el ratón por encima*/
padding: 7px 10px;
}
#menud li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#menud li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#menud li ul a { width: 140px; }
#menud li ul ul { margin: -32px 0 0 171px; }
#menud li:hover ul ul, #menud li:hover ul ul ul, #menud li.sfhover ul ul, #menud li.sfhover ul ul ul {left: -999em; }
#menud li:hover ul, #menud li li:hover ul, #menud li li li:hover ul, #menud li.sfhover ul, #menud li li.sfhover ul, #menud li li li.sfhover ul { left: auto; }
#menud li:hover, #menud li.sfhover {position: static;}
</style>
Eso es todo. Suerte con tu blog y nos leemos.
Con el tiempo editare, mejorare este menú y subiré los que desarrolle.
¿No hay forma de hacerlo sin la barra que sale por defecto al bajar?
ResponderEliminarHola, mil disculpas para todos. Tengo mi blog abandonado, debido a que no dispongo de tiempo libre y de una conexión estable. espero volver y actualizar todo en cuanto tenga tiempo. Muchas gracias. :)
Eliminar