Hii! Hoy os trago como poner este menú en vuestro blog...
Para ver el efecto que hace, mirad en este BLOG DE PRUEBAS donde podréis verlo.
Es muy sencillo, primero vamos a Plantilla > Editar HTML > Y buscamos [Cmd + F] <head> y pegamos el siguiente código debajo de ese (para poder cambiar los colores y estilos del menú, encontrareis todo dentro del código):
<style type='text/css'>PD: Si quereis cambiar algún color, podréis conseguir el código del color en la TABLA DE COLORES.
.invertedshiftdown2{
padding: 0;
width: 100%;
border-top: 5px solid #ffc7e2; /*ancho, tipo y color de linea de arriba*/background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown2 ul{
margin:0;
margin-left: 40px;
padding: 0;
list-style: none;
}
.invertedshiftdown2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase; /*transformas las letras en mayúscula, si no te gusta pon none*/}
.invertedshiftdown2 a{
float: left; /*Donde se situa la letra: Left/Right/Center*/display: block;
font: bold 12px Arial; /*tipo de letra: Tamaño y estilo*/color: #ffc7e2; /*color de letra*/text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 5px 10px;
background-color: #cc6e83; /*color del menú antes de seleccionar*/border-bottom: 8px solid white; /*tamaño de la línea de abajo [8px] y tipo de linea [Solid]*/}
.invertedshiftdown2 a:hover{
background-color: #cc6e83; /*color del menu al seleccionar*/padding-top: 10px;
padding-bottom: 0; /*Agrandar la selección */border-bottom-color: #cc6e83; /*color del menú al seleccionar, parte de abajo*/color: #cc6e83; /*color de letra al seleccionar*/}
.invertedshiftdown2 .current a{
background-color: #ffc7e2; /*color fijo de inicio*/padding-top: 10px;
padding-bottom: 0;
border-bottom-color: #ffc7e2; /*color fijo de inicio, parte de abajo*/color: #ffc7e2; /*esto es el color fijo de letra de INICIO*/}
</style>
Ahora guardamos, y vamos a Diseño > Añadir gadget: HTML/Javascrip (ponedlo debajo de la cabecera el gadget!!!) > Y ponemos el siguiente código ahi:
<div class="invertedshiftdown2">Naranja [Aquí la dirección] -> Aquí ponemos la URL de tu blog/web
<ul>
<li class="current"><a href="Aqui la direccion" title="Inicio">El inicio</a></li>
<li><a href="Aqui la URL" title="TITULO">TITULO</a></li>
<li><a href="Aqui la URL" title="TITULO">TITULO</a></li>
<li><a href="Aqui la URL" title="TITULO">TITULO</a></li>
<li><a href="Aqui la URL" title="TITULO">TITULO</a></li>
<li><a href="Aqui la URL" title="TITULO">TITULO</a></li>
<li><a href="Tu email" title="gmail">Contacto</a></li>
</ul></div>
Morado [Inicio/El Inicio] -> La pestaña de inicio, puedes cambiarlo por Home o Página Principal o lo que quieras.
Azul [Aquí la URL] -> Aquí ponermos la dirección web/blog que queramos.
Rojo [TITULO] -> Aquí pondremos el nombre de la pestaña (en ambos, por ejemplo: ....title="Pedidos">Pedidos</a>....)
Verde [tuemail@gmail.com] -> Ahi se pone tu email de contacto
Rosa [Contacto] -> En este podemos cambiar el titulo de "Contacto" y poner otra cosa como Mi email o algo así.
Guardamos y listo! Ya tendremos el menú puesto :3
Cualquier duda me dicen ^^ Bye bye~
Gracias por el tuto :),besos ^3^
ResponderEliminar