Bueno, como mi intención es meter algunos contenidos mas que las propias publicaciones, he intentado poner una barra de herramientas, pero Blogger parece que no tiene esa opción, salvo insertando un gadget de HTML/Javascript.
Os pego un tutorial que me ha ayudado ... que seguro que hay alguien que necesita ayuda como yo :
Tutorial para crear una barra de botones en Blogger
Ahora me toca adecentarlo y ponerlo mas bonito ... sobre todo los botones que son demasiado básicos para mi gusto.
Por ahora, este es el código final que he puesto, por si os gusta lo simple como a mi y que pertenece a las letras de la parte superior del menú :
<div id="menuarriba">
<ul id="navi1">
<li><a href="http://jcarlosreblog.blogspot.com.es/">INICIO</a></li>
<li><a href="URL">ACERCA DE</a></li>
<li><a href="http://jcarlosreblog.blogspot.com.es/p/galeria_5.html">GALERIA</a></li>
<li><a href="URL">ARCHIVOS</a></li>
<li><a href="URL">CONTACTO</a></li>
</ul>
</div>
<style type="text/css">
#navi1 {
margin:0px;
padding:0px;
}
#navi1 li {
color:#000000;
margin:3px;
padding:0px;
width: 90px;
border:0px;
text-align:center;
list-style:none;
font-family: Arial, Verdana, Segoe UI;
font-size: 9px;
float:left;
}
#navi1 li:hover {
color:#999999;
}
#navi1 li a:hover {
color: #cccccc;
}
#navi1 a {
color: #999999;
}
</style>
Por ahora, este es el código final que he puesto, por si os gusta lo simple como a mi y que pertenece a las letras de la parte superior del menú :
<div id="menuarriba">
<ul id="navi1">
<li><a href="http://jcarlosreblog.blogspot.com.es/">INICIO</a></li>
<li><a href="URL">ACERCA DE</a></li>
<li><a href="http://jcarlosreblog.blogspot.com.es/p/galeria_5.html">GALERIA</a></li>
<li><a href="URL">ARCHIVOS</a></li>
<li><a href="URL">CONTACTO</a></li>
</ul>
</div>
<style type="text/css">
#navi1 {
margin:0px;
padding:0px;
}
#navi1 li {
color:#000000;
margin:3px;
padding:0px;
width: 90px;
border:0px;
text-align:center;
list-style:none;
font-family: Arial, Verdana, Segoe UI;
font-size: 9px;
float:left;
}
#navi1 li:hover {
color:#999999;
}
#navi1 li a:hover {
color: #cccccc;
}
#navi1 a {
color: #999999;
}
</style>
Una vez introducido el código, podéis ir a configuración avanzada y modificar los colores, el fondo y demás.
Juan Carlos Reinoso (jcarlosre)
0 comentarios:
Publicar un comentario