Lo Último

Menú desplegable




Añadir un menú desplegable en tu blog va a permitir que tanto tus visitantes como tu, tengáis todo a mano.

En Blogger In te enseñamos a proporcionar a tu blog un menú desplegable, en el que podrás poner todos los enlaces que quieras organizados por temas. Para poner éste menú procede de la siguiente forma:

No va a ser tarea fácil, así que antes de manipular el contenido de tu plantilla haz una copia de seguridad de la misma, por si las moscas!

Lo primero es añadir el gadget en la zona Croscoll que hay bajo la cabecera del blog:


Ve a tu "Escritorio Blogger"
Pulsa en tu "Blog"
Pulsa en "Diseño"
Pulsa en "HTML Javascript"en la caja de texto añade el siguiente código:
/------------------------------------------------------------------------------------------------------\
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL-Principal-de-tu-BLOG">Inicio</a></li>
<li><a href="#">Pestaña1</a>
<ul>
<li><a href="URL SUB-MENU1">Sub-menu1.1</a></li>
<li><a href="URL SUB-MENU2">Sub-menu1.2</a></li>
</ul>
</li>
<li><a href="#">Pestaña2</a>
<ul>
<li><a href="URL SUB-MENU1">Sub-menu2.1</a></li>
<li><a href="URL SUB-MENU2">Sub-menu2.1</a></li>
</ul>
</li>
<li><a href="URL pestaña sin submenus">Pestaña3</a>
</li>
<li><a href="URL pestaña sin submenus">Pestaña4</a>
</li>
</ul>
</div></div>
\------------------------------------------------------------------------------------------------------/

En rojo debeis poner las URL para enlazar cada pestaña, en verde tenéis los títulos de las pestañas. Son pestañas ejemplo, las que tienen # en lugar de una URL es porque será una pestaña en el menú principal sin enlace que acoge a las subpestañas, si en lugar de tener # tiene URL significa que la pestaña del menú principal tiene un enlace y no contiene subpestañas.

Podéis preparar éste código con calma en un archivo de texto, para no andar mareando al blog, cuando lo tengáis preparado, metéis el código en el gadget HTML Javascript, como os indiqué arriba.




Luego toca ir a la plantilla del blog para introducir los estilos del menú, procedemos de la siguiente forma:


Ve a tu "Escritorio Blogger"
Pulsa en tu "Blog"
Pulsa en "Plantilla"
Pulsa en "Crear/Restablecer copia de seguridad"
Pulsa en "Descargar plantilla completa"
Dale un nombre, la guardas y pulsas en "Cerrar"
Pulsa en "Editar HTML"

Busca en tu plantilla ]]></b:skin> y antes pega el siguiente código:
/------------------------------------------------------------------------------------------------------\
/* Menú Desplegable LN
----------------------------------------------- */
 #menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#F5A9D0; /* Color de fondo del menú */
border-radius:0px; /* Bordes redondeados, si queremos ponerlos */
}
.menu {
width: 100%;
float: left;
font-family: Arial; /* Tipo de fuente*/
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 0px 0px; /* Bordes redondeados del submenú, si queremos ponerlos */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#F5A9D0 url() bottom right no-repeat;
color:#000000; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #F3A9EB; /* Color de las pestañas al pasar el cursor */
color:#000000; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#F8E0EC; /* Color de fondo de las subpestañitas */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho de las subpestañas */
z-index:100;
border-top:1px solid #ffffff; /* Borde superior de las subpestañas */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 0px 0px; /* Borde redondo de las subpestañas, si queremos ponerlo */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#F8E0EC; /* Color de las subpestañas al pasar el cursor por encima */
color:#000000; /* Color de las letras*/
text-decoration:none;
}

.menu {
margin-left: 150px; /*Juega con el % o los píxeles para centrar el menú entero*/

#menu {text-align:center !important;}
#menu li {display:inline !important; float:none !important; text-align:center !important;}
\------------------------------------------------------------------------------------------------------/

En rojo los valores que podéis cambiar para poner el menú a vuestro gusto, como siempre recordar cambiar los valores en tu blog de pruebas, para que un posible visitante no note cambios repentinos en tu blog




Para que el menú funcione tienes que hacer dos cambios en tu plantilla:

Buscais Tabs como lo véis en la imagen de abajo

Sustituís todo lo que está enmarcado en rojo por el siguiente código:
/------------------------------------------------------------------------------------------------------\
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;} 
\------------------------------------------------------------------------------------------------------/
Y os queda como en la imagen de abajo




ahora con Ctrl+F buscáis la palabra crosscol y encontraréis esto así:

Los dos cuadritos en los que dice: class= 'tabs' los borráis

Pulsa en "Guardar plantilla"

Ahora ya podéis ir a vuestro blog y mirar como queda vuestor flamante menú por pestañas. Cambiando los valores en el código de la plantilla para definir los estilos, y luego diseñando las URL y títulos del gadget, os dejará un menú superguapo!!

Si queréis ver como queda sólo tenéis que verlo bajo la cabecera de ésta página.


Esto es todo! espero que disfrutéis del nuevo menú desplegable de vuestro blog!!



Para estar actualizado en las novedades de Blogger In puedes seguir el blog, para ello ve al gadget al final de este blog y pulsa en "Participar en éste sitio" y sigue el asistente hasta el final y comprueba que apareces en el gadget. Feliz semana amigos!!