Tutorial: Cómo agregar un menú desplegable en Blogger


Cómo agregar un menú desplegable en Blogger

¡Hola! Hoy vengo con el segundo tutorial del blog en el cual les muestro cómo agregar un menú desplegable en Blogger 😀 Si no tienen mucha experiencia con HTML y CSS, puede que hacer algo como el siguiente menú pueda resultar algo difícil; así que traté de que el tutorial fuera fácil de seguir. Si al final del tuto aún tienen preguntas, siéntanse libres de hacerlas en los comentarios o enviarme un correo electrónico para explicarles “personalmente.” ¡Comencemos!

1. – 3. Respalda tu plantilla actual

Vayan a Plantilla -> Hacer copia de seguridad/Restablecer -> Descargar la plantilla completa

menustep001 menustep01

4. Añadir el CSS

Una vez que hayan respaldado su plantilla, hagan clic dónde dice Editar HTML. Ahora, busquen el código que aparece alrededor de la línea #13. Es algo así:

menustep02

Hagan clic entre los del <b:skin>…</b:skin> para extender los artículos. Ahora presionen CTRL + F y busquen la siguiente línea ]]></b:skin>.

menustep03

Ahora, añadan el siguiente código ANTES de esa línea:

CSS

/* Menu principal */#cssmenu,
#cssmenu > ul {
background: #000 url() repeat; /* color para la linea horizontal que aparece debajo del color principal */
padding-bottom: 3px;
font-family: ‘Open Sans’, sans-serif; /* tipografía principal del menú */
font-weight: 600; /* tamaño de la fuente */
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: ”;
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: #960023 url() repeat; /* color de fondo principal del menú */
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > a {
padding: 23px 26px;
display: block;
color: white; /* color principal para la fuente del menú */
font-size: 13px;
text-decoration: none;
text-transform: uppercase; */ decoración del texto puede ser cambiado a lowercase o normal */
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
line-height: 18px;
}
#cssmenu > ul > li:hover > a {
background: #000 url() repeat; */ el color de fondo o imagen para que aparezca cuando pasen el ratón sobre una página */
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li > a > span {
line-height: 18px;
}
/* Menu despegable */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: #960023 url() repeat; */ color de fondo o imagen para los artículos del sub-menú */
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 64px;
left: 0;
}
#cssmenu > ul ul:before {
content: ”;
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a {
padding: 18px 26px;
display: block;
color: white; */ color para la fuente del sub-menu */
font-size: 13px;
text-decoration: none;
text-transform: uppercase; */ decoración para fuente del sub-menu; puede ser personalizado a lowercase o normal */
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #000; */ tamaño de la línea vertical que aparece en los sub-menus */
background: #ac3853 url() repeat; */ color de fondo o imagen para cuando se pasa el ratón sobre un artículo del sub-menu */
}
#cssmenu > ul ul li a:active {
background: url(menu-bg.png) repeat;
}

Atención:

•Lo que he señalado son los detalles más fáciles que les sugiero personalizar para que así no dañen la estructura del menú.

•Si quieren agregar una imagen en lugar de un color de fondo, asegurense de poner la URL de la imagen entre los paréntesis que aparecen después de url.

Una vez que hayan agregado el código, opriman Obtener vista previa de plantilla. ¿Notan algún cambio? ¿Su plantilla se ve igual cómo lo hacía antes de que comenzaran con el tutorial? Si sus respuestas son afirmativas, ¡entonces genial! Eso significa que hasta ahora todo va al pie de la letra 😉

5. Añadir el HTML

En este paso, agregaremos el código HTML para que el menú aparezca en el lugar dónde ustedes gusten.

Si quieren que el menú aparezca ANTES de la cabecera del blog, entonces sigan las siguientes instrucciones. Si desean que el menú esté después de la cabecera, procedan a Menú después de la cebecera.

Menú antes de la cabecera

Para que el menú esté arriba de la cabecera, tienen que buscar la siguiente línea en su  plantilla:

<div class=’content-outer’>

menustep04

DESPUÉS de esa línea agreguen el HTML para el menú.

<div id=’cssmenu’>
<ul>
<li class=’active’><a href=’URLopcion1′><span>Opción 1</span></a></li>
<li class=’has-sub’><a href=’URLopción2′ target=’_blank’><span>Opción 2</span></a>
<ul>
<li><a href=’URLsubopcion2′ target=’_blank’><span>URL Sub-opción 2</span></a></li>
<li><a href=’URLsubopcion2′ target=’_blank’><span>URL Sub-opción 2</span></a></li>
<li class=’last’><a href=’URLsubopcion2′ target=’_blank’><span>URL Sub-opción 2</span></a></li>
</ul>
</li>
<li class=’has-sub’><a href=’URLopcion3′ target=’_blank’><span>Opción 3</span></a>
<ul>
<li><a href=’URLsubopcion3′ target=’_blank’><span>URL Sub-opción 3</span></a></li>
<li class=’last’><a href=’URLsubopcion’ target=’_blank’><span>URL Sub-opción 3</span></a></li>
</ul>
</li>
<li class=’last’><a href=’URLopcion4′><span>Opción 4</span></a></li>
</ul>
</div>

 

**Remplacen URLopcion1, 2, 3 & 4 con las URLs que quieran que aparezcan en el menú principal. Para el sub-menú, remplacen las opciones que aparecen en cada URLsubopcion con las URLs que desean que aparezcan en el menú despegable.**


Menú después de la cabecera

Si quieren que el menú despegable aparezca DESPUÉS de la cabecera, busquen la siguiente línea en su plantilla:

</header>

menustep05

Una vez hayan encontrado la línea, agreguen el siguiente código entre las etiquetas </header> & <div class=’tabs-outer’>:

<div id=’cssmenu’>
<ul>
<li class=’active’><a href=’URLopcion1′><span>Opción 1</span></a></li>
<li class=’has-sub’><a href=’URLopción2′ target=’_blank’><span>Opción 2</span></a>
<ul>
<li><a href=’URLsubopcion2′ target=’_blank’><span>URL Sub-opción 2</span></a></li>
<li><a href=’URLsubopcion2′ target=’_blank’><span>URL Sub-opción 2</span></a></li>
<li class=’last’><a href=’URLsubopcion2′ target=’_blank’><span>URL Sub-opción 2</span></a></li>
</ul>
</li>
<li class=’has-sub’><a href=’URLopcion3′ target=’_blank’><span>Opción 3</span></a>
<ul>
<li><a href=’URLsubopcion3′ target=’_blank’><span>URL Sub-opción 3</span></a></li>
<li class=’last’><a href=’URLsubopcion’ target=’_blank’><span>URL Sub-opción 3</span></a></li>
</ul>
</li>
<li class=’last’><a href=’URLopcion4′><span>Opción 4</span></a></li>
</ul>
</div>

 

**Remplacen URLopcion1, 2, 3 & 4 con las URLs que quieran que aparezcan en el menú principal. Para el sub-menú, remplacen las opciones que aparecen en cada URLsubopcion con las URLs que desean que aparezcan en el menú despegable.**

6. Resultando final 🙂

Para terminar, opriman Obtener vista previa de plantillaSi han hecho todo bien, el menú debe de estar  antes o después de la cabecera, todo depende del lugar que ustedes hayan elegido colocarlo 😀

Para ver el resultado final del menú despegable en el blog de pruebas, hagan clic en el siguiente botón:

Demo: Menú despegable en Blogger


Espero que el tutorial les haya resultado fácil, ¡de verdad traté! Como mencioné arriba, en el caso que necesiten ayuda extra pueden realizar sus preguntas en los comentarios o por email 😀

Para sugerir más tutoriales relacionados a Blogger, ¡llenen el formulario aquí!

Siempre sonrían,

Sobre Annaiss

Annaiss es una chica veinte-tantos años, es introvertida y una fangirl. Vive en USA y desde que estudió Español en el octavo grado de secundaria se enamoró de su idioma natal y ahora lo practica de la mejor manera que puede: blogging. Le gusta leer de todo género, aunque prefiere el Romance contemporáneo. Puedes encontrarla en Twitter, Facebook e Instagram.

Publicado en 08/01/2014 por Annaiss en Tutorial / 13 Comments

Etiquetas: , , , ,

13 Responses to “Tutorial: Cómo agregar un menú desplegable en Blogger”

  1. Camii Ailen

    Mee encanta cielo!! Gracias! Hace rato que venía buscando como hacer eso, y no entendía!! jajaja

  2. Justo quería darle un nuevo estilo a mi blog para este año. Usaré esto como complemento a la nueva imagen. Gracias, haces que los tutoriales sean muy fáciles de seguir ^-^
    Consuelo recently posted…Reto: LiterigatosMy Profile

  3. De No se Pudo cargar la previa vista de la Plantilla: Se ha Producido error ONU al analizar el XML, línea 960, Columna 9: Se espera que la cita abierto para el atributo “id” asociado con un tipo de elemento “div”.

    Me da este error, que hago ?

  4. Jesus

    Disculpa me aparece este error. No se ha podido cargar la vista preliminar de la plantilla: Error al analizar XML, línea 1001, columna 9: Open quote is expected for attribute “id” associated with an element type “div”.
    Que puedo hacer?