A continuación te explicaré cómo incluir el menú de pestañas SimpleBlue en tu blog, puedes ver cómo será el resultado más abajo...
*Voy a enseñarte a ponerlo igual que el de la imágen, te enseñaré a cambiar el tamaño y la altura pero si quieres cambiar cualquier otra cosa y no sabes cómo hacerlo, puedes preguntarme por medio de un comentario o un correo.
Diseño>edición HTML>expandimos artilugios
Busca la etiqueta ]]></b:skin> y justo antes le pegas este código, que es el que representa todas las características del menú...
/* -------------------SimpleBlue------------------- */
#SimpleBlue {
height: 45px;
width: 680px;
border: 2px groove #151084;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv7tlRObBf9G4kr4-5Ms6lfQ6bST7YGFXiQJOTEDUOhBOhKkzMKn1ksgBEEYrioF2MncXn9w-fqwGpIOPI6rB8H5Nz0C_S8l_0VWqRbnxMoa47X6gpaIrQCNsmkiGgbXZ2m2IfVn-TvK8/s1600-r/asul.bmp') no-repeat left top;
margin: 0 auto;
}
#SimpleBlue ul {
margin: 0;
padding: 10px 0px 0px 10px;
list-style: none;
line-height: normal;
}
#SimpleBlue li {
text-decoration: none;
float: left;
}
#menu a:hover, #menu .current_page_item a {
}
#SimpleBlue a {
text-decoration: none;
margin-right: 3px;
color: #0800d1;
border: none;
padding: 6px 20px 7px 20px;
display: block;
font-family: arial, Comic sans MS;
font-size: 15px;
font-weight: normal;
}
#SimpleBlue a:hover {
color: #ffffff;
background: #0800d1;
text-decoration: bold;
}
#SimpleBlue a:hover, #menu .current_page_item a {
}
/* --------------Final-SimpleBlue------------------- */
Para cambiarle el ancho, puedes hacerlo en el primer bloque, modificando el valor de la línea de with.
Para cambiarle la altura, puedes hacerlo en el primer bloque, modificando el valor de la línea de height.
Ahora Guarda cambios.
Diseño>añadir gadget (elemento de página)>html-javascript
Pegas este código:
<div id="SimpleBlue">Sustituye en cada caso URL DE TU PAGINA por la dirección (URL) de tu blog o web, por ejemplo: http://google.es/
<ul>
<li><a href="URL DE TU PAGINA">TITULO</a></li>
<li><a href="URL DE TU PAGINA">TITULO</a></li>
<li><a href="URL DE TU PAGINA">TITULO</a></li>
<li><a href="URL DE TU PAGINA">TITULO</a></li>
</ul>
</div>
Sustituye en cada caso TITULO por el titulo de la pagina, por ejemplo: Inicio
Recuerda que si quieres tener menos enlaces, simplemente tienes que eliminar una de estas líneas:
<li><a href="URL DE TU PAGINA">TITULO</a></li>
¡Guarda cambios y listo!
¿Problemas al comentar? Utiliza 
Hola Jaime!!
Gracias por pasar por mi blog.
Me gsuta el tuyo, puedo aprender unas cuantas cosas, que me vendrán muy bien.
Ya seguiremos viéndonos.
besos
hola jaime!
primero gracias por la data.
aqui va mi duda: y si queremos cambiarle el color?, por ejemplo letras negras sobre fondo blanco.
gracias!
muy buen blog me a servido muchos de tus tutoriales para varias cosas del blog, por cierto coloque tu banner en mi blog, bueno saludos y ahi te vez.
Hola CARMEN! muchas gracias por pasarte por El Balcón :-D vuelve cuándo quieras :-D Un abrazo0!!
Hola ViVy! eso es fácil, pero mejor envíame tu pregunta por un correo, te lo explicaré más ´fácilmente y te será más cómodo de hacer que en un comentario :-)
Hola Ryuivan! cuánto me alegra que te sirviesen de ayuda los tutoriales :-D si necesitas cualquier tipo de ayuda, aquí estaré :-) un graaaaaaaaaaaan saludo y gracias por el banner! :-D
Gracias Javi!! ya lo habia esta checando el fin de semana. Mi pregunta es, en vez de poner
TITULOPuedo poner la URL del boton y la img del boton?
Tenkiusssssss
Viviana, claro que se puede, lo único que el icono debería ser transparente y de un tamaño específico (45px de altura como máximo).
Si consigues iconos con esas propiedades, simplemente añade esta línea en lugar de TITULO:
<img src="url de tu imagen"/>
Gracias Javier...
no, de transparente, nada... este es mi icono: http://i43.tinypic.com/15fjbl1.jpg
Viviana, ¡te refieres a poner ese cuadrito de fondo! eso se podría hacer pero me temo que habría que destruir este menú.
Mejor publico una entrada explicando otro menú para que puedas poner esa imágen de fondo =D
Me llamo Jaime, no Javier jejeje ☺ :)
tu madre pensando 9 meses tu nombre para yo cambiartelo en 1 segundo!!! jejeje perdon!
pues no... yo se q se puede hacer... el tema es "como" jajaja
sigo investigando besos!!!!!!!!!!
Viviana, jejeje no te preocupes ^_^ verás, hacerse se puede hacer lo único que adoptaría otra estructura... pero claro que se puede hacer, aquí te dejo el css:
/* -------------------SimpleBlue------------------- */
#SimpleBlue {
color: #ffffff;
height: 45px;
width: 680px;
margin: 0 auto;
}
#SimpleBlue ul {
margin: 0;
color: #ffffff;
padding: 10px 0px 0px 10px;
list-style: none;
line-height: normal;
}
#SimpleBlue li {
color: #ffffff;
margin-left: 0.6em;
background: url(http://i43.tinypic.com/15fjbl1.jpg)no-repeat;
text-decoration: none;
float: left;
}
#menu a:hover, #menu .current_page_item a {
}
#SimpleBlue a {
text-decoration: none;
margin-right: 3px;
color: #ffffff;
border: none;
padding: 6px 20px 7px 20px;
display: block;
font-family: arial, Comic sans MS;
font-size: 15px;
font-weight: normal;
}
#SimpleBlue a:hover {
color: #ffffff;
text-decoration: none;
}
#SimpleBlue a:hover, #menu .current_page_item a {
}
/* --------------Final-SimpleBlue------------------- */
Ahora mismo hago el intento... si me dices donde lo ubico.. o me baso en este post?
Y no es que quiera la imagen de fondo... quiero una linea de botones como el que pase... ay q torpe soy para explicartelo...
Viviana, sigue los mismos pasos de esta entrada pero en lugar de poner el CSS de arriba pon el del comentario ;-)
Joé... la de cosas que haces!
¡Por supuesto Laube! aunque solo sea por compartir ya merece la pena crear trucos ^_^.