CÓMO COLOCAR UN MENÚ EN TU BLOG
CÓMO COLOCAR UN MENÚ EN TU BLOG
Lo primero que debemos hacer es activar un gadget en la parte superior del blog. Generalmente blogger no tiene activa es posibilidad, pero hay plantillas externas que descargamos y que luego la activamos en blogger que puede contener esa posibilidad. Si utilizas una plantilla básica de blogger este post te va a ser de ayuda.
Códigos para colocar un menú al
blog
Lo primero que hay que hacer es dirigirnos a la sección Plantilla y hacemos lo siguiente:
(Editar HTLM, Control + F)
Buscamos
en siguiente código:
<div class='region-inner header-inner'>
Abajo va aparecer el siguiente código:
<b:section class='header' id='header'
maxwidgets='1' name='Header' showaddelement='no'>
(Puede que no sea tal cual el código pero lo importante que tenga las descripciones: maxwidgets= y showaddelement=)
Lo modificamos con lo siguiente:
(maxwidgets='10' showaddelement='yes')
El siguiente paso es agregar el gadget:
(Crear los Menús y Sub Menús con el siguiente código)
Añadir
un Gadget,HTML Javascript en la parte superior, donde lo activamos previamente.
Luego colocamos el siguiente código:
<div id='mbwnavbar'>
<ul id='mbwnav'>
<li>
<a
href='#'>home</a>
</li>
<li>
<a
href='#'>menú 1</a>
</li>
<li>
<a href='#'>menú 2</a>
<ul>
<li><a href='#'>menú
2.1</a></li>
<li><a href='#'>menú
2.2</a></li>
<li><a href='#'>menú
2.3</a></li>
</ul>
</li>
<li>
<a
href='#'>menú 3</a>
<ul>
<li><a
href='#'>menú 3.1</a></li>
<li><a
href='#'>menú 3.2</a></li>
<li><a
href='#'>menú 3.3</a></li>
</ul>
</li>
<li>
<a
href='#'>menú 4</a>
<ul>
<li><a
href='#'>menú 4.1</a></li>
<li><a href='#'>menú
4.2</a></li>
<li><a
href='#'>menú 4.3</a></li>
</ul>
</li>
</ul>
</div>
El tercer es agregar otro código en la plantilla para que el menú quede bien:
(Plantilla, Editar HTLM, Control +
F)
Buscamos
en siguiente código:
]]></b:skin> ó /b:skin
Copiamos en siguiente código encima de la línea
encontrada:
/**MBW
Navgation bar**/
#mbwnavbar
{
background:
#ea7288;
color de barra del menú
width:
900px;
color:
#d8f602;
margin:
0px;
padding:
0;
position:
relative;
border-top:0px
solid;
height:35px;
}
#mbwnav
{
margin:
0;
padding:
0;
}
#mbwnav
ul {
float:
left;
list-style:
none;
margin:
0;
padding:
0;
}
#mbwnav
li {
list-style:
none;
margin:
0;
padding:
0;
border-left:1px
solid #333;
border-right:1px
solid #333;
height:35px;
}
#mbwnav
li a, #mbwnav li a:link, #mbwnav li a:visited {
color:
#FFF;
display:
block;
font:normal
12px Helvetica, sans-serif; margin: 0;
padding:
9px 12px 10px 12px;
text-decoration:
none;
}
#mbwnav
li a:hover, #mbwnav li a:active {
background:
#f2641d;
color de la selección 1
color:
#0a0a0a;
display:
block;
text-decoration:
none;
margin:
0;
padding:
9px 12px 10px 12px;
}
#mbwnav
li {
float:
left;
padding:
0;
}
#mbwnav
li ul {
z-index:
9999;
position:
absolute;
left:
-999em;
height:
auto;
width:
160px;
margin:
0;
padding:
0;
}
#mbwnav
li ul a {
width:
140px;
}
#mbwnav
li ul ul {
margin:
-25px 0 0 161px;
}
#mbwnav
li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav
li.sfhover ul ul ul { left: -999em;
}
#mbwnav
li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav
li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
left:
auto;
}
#mbwnav
li:hover, #mbwnav li.sfhover {
position:
static;
}
#mbwnav
li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background:
#f73920;
color de la selección 2
width:
150px;
color:
#FFF;
display:
block;
font:normal
12px Helvetica, sans-serif;
margin:
0;
padding:
9px 12px 10px 12px;
text-decoration:
none;
z-index:9999;
border-bottom:1px
dotted #333;
}
#mbwnav
li li a:hover, #mbwnavli li a:active {
background:
#d8a15d;
color de la selección 3
color:
#FFF;
display:
block; margin: 0;
padding:
9px 12px 10px 12px;
text-decoration:
none;
}
Los códigos de color son los que se pueden modificar. Puedes utilizar estos códigos: ingresa aquí.
.png "English"){kind=small}
No hay comentarios.: