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!!