Es MUY sencilla, y no es lo más estéticamente piola del mundo, pero sirve a su fin.
Cuando pasas el mouse por arriba cambia de color y todo (xD) así que safa bastante.
Bueno,
Leer Más... 1. Diseño>Edición de HTML>Expandir plantillas de artilugios
2. Buscan (Ctrl+F) el siguiente código: /* Header, debajo suyo aparece una linea de rayas y un */. Debajo de este ultimo, copian este código:
#menu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}
#menu li a{
color:#dfffed;
}
#menu li a:visited {
color: #57E964;
}
#menu li a:hover {
color: #F88017;
background: #ffff66;
}
Al final del post explico como cambiar las variables para modificar colores y demás.
3. Busquen maxwidgets='1' showaddelement='no'
Cambien el 1 por un numero mayor a 4 y el "no" por "yes".
Queda: maxwidgets='5' showaddelement='yes'
Guardar plantilla.
4. Diseño>Elementos de pagina. Añadir un gadget>HTML/Javascript.
Copiamos el siguiente código:
<div id="menu">
<ul>
| <li><a href="Tu URL">Link 1</a></li> |
<li><a href="Tu URL">Link 2</a></li> |
<li><a href="Tu URL">Link 3</a></li> |
<li><a href="Tu URL">Link 4</a></li> |
</ul></div>
Donde cambiamos ""Tu URL"" por el link a donde queremos ir cuando cliqueamos el botón y cambiamos las frase Link nº, por la palabra que aparecerá en la barra horizontal.
En el caso de la imagen de arriba, el código es:
<div id="menu">
<ul>
| <li><a href="http://peroxidodelmetal.blogspot.com/">Home</a></li> |
<li><a href="http://peroxidodelmetal.blogspot.com/search/label/Tips%20para%20el%20Blog">Tips para el Blog</a></li> |
<li><a href="http://peroxidodelmetal.blogspot.com/search/label/Naruto">Naruto</a></li> |
<li><a href="http://peroxidodelmetal.blogspot.com/search/label/Comics">Comics</a></li> |
</ul></div>
Ahora bien, para tunear un poco estos links;
Yo personalmente en Diseño>Elementos de pagina, arrastre el Gadget poniéndolo justo arriba del cuadrado que dice "Entradas del blog".
Respecto al código que agregamos en el paso 2;
font-size:100%; Tamaño de la letra
margin:10px; Margen, en pixeles
border:0px solid; El tamaño y estilo del borde. Mirar esta pagina
#menu li a{
color:#dfffed; Color de las letras
#menu li a:visited {
color: #57E964; Color del link una vez que fue visitado (puede ser el mismo que el anterior).
#menu li a:hover { Color cuando se le pasa el mouse por arriba.
color: #F88017; Color de la letra.
background: #ffff66; Color del cuadrado que rodea las letras al pasar el mouse por encima.
Para cambiar los colores: Color-Codes
Eso es todo por ahora.
Adiós!
