Hooola!♥
En este post te quiero enseñar como tener un menu como el mio...
♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
Lo que tienes que hacer es esto:
1♥ Ve al Editor HTML de tu blog (Blogger) y presionas CTRL+F con el cursor asi como para escribir. Ahi pegas esto:
]]></b:skin>
2♥ Ahora edita este codigo a tu gusto (no te preocupes, mas adelante te voy a decir como)...
#menuii {background:#COLOR BOTONES;
padding:7px;
width:230px;
display: inline-block;
transition: all 0.5s ease;
-o-transition-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
border-radius:5px;
text-align:center;
}
#menuii:hover #categorii {
opacity:3;
-webkit-transition-duration:.7s;
overflow:hidden;
z-index:966666666666666666666666666666666666666669;
height:auto;
}
#categorii {
font-family: calibri;
font-size: 17px;
margin-top:1px;
margin-left: -7px;
position:absolute;
overflow:hidden;
line-height: 20px;
padding: px;
opacity:0;
transition: all 0.5s ease;
-o-transition-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
width:250px;
}
#categorii a{
background:#COLOR SUBMENUS;
color: #fff;
width:244px;
text-align:center;
display:block;
line-height: 20px;
transition: all 0.5s ease;
-o-transition-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
border-top:3px solid #fff;
}
#categorii a:hover{
color:#TEXTO CON CURSOR ENCIMA;
background: #COLOR FONDO SUBMENUS CON CURSOR ENCIMA;
opacity:100; transition: all 0.5s ease;
-o-transition-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
(Primero que todo te recomiendo que primero pegues este código en tu Bloc de Notas)
3♥ Ahora guíate por lo que esta de color
magenta. En el primero tienes que poner el código HTML de el color que quieres que sean los
botones principales. El segundo es de el color de los
submenus. El tercero es el
texto de los submenus con el cursor encima y finalmente el cuarto es el color de el
fondo de los submenus con el cursor encima.
. ..
4♥ Ya que editaste el código lo pones arriba de el código que ya te di (es
]]></b:skin> para que no te tengas que devolver) y lo guardas.
Seguro te estaras preguntando:
-¿Y donde pongo el nombre de los menús y todas esas cosas?
Eso es lo que te enseñare en este momento...
Lo que vas a hacer es copiar este codigo (y pegarlo en tu Bloc de Notas):
<div class="separator" style="clear: both; text-align: center;">
<div id="menuii">NOMBRE DEL MENU
<div id="categorii">
<a href="LINK">NOMBRE DE SUBMENU</a>
<a href="LINK">NOMBRE DE SUBMENU</a>
<a href="LINK">NOMBRE DE SUBMENU</a>
<a href="LINK">NOMBRE DE SUBMENU</a>
</div></div></div>
Si, si ya se que son muy confusos los colores.
1♥ La primera parte
magenta es el nombre de la categoria de el menu.
Tienes que hacer varios de estos si quieres tener mas de una categoria.
Ejemplo: 3 categorias = 3 de estos codigos
2♥ La parte verde son los submenus.
Puedes agregarle o quitarle.
NOTA: Cada linea es un submenu.
Lo magenta entre lo verde es:
LINK: El link de la pagina que quieres que lleve el botón (yo le pongo etiquetas o entradas del blog en especifico)
NOMBRE DEL SUBMENU: Como dice, es el nombre del submenu
Recuerda que lo que tienes que hacer es editar solo las areas de colores.
3♥ Ahora por ultimo, tienes que poner el texto en un nuevo 'HTML/Javascript' en el area de diseño de tu blog.
NOTA: Cada seccion de el menu tiene que estar en un nuevo elemento 'HTML/Javascript'.
Espero que te haya servido...
Adios♥
