Hace unos días en la entrada sobre el editor HTML online puse un menú de ejemplo y si bien instalarlo es fácil para la mayoría, otros me han preguntado cómo ponerlo en el blog. Y bueno, además de esto se me ocurrió que el menú tuviera un mensaje en marquesina para que pudieran anunciar algo, dar la bienvenida o promocionar una entrada.
Para ponerlo en tu blog entra en Diseño > Edición de HTML y pega antes de ]]></b:skin> lo siguiente:
#menu-title {
padding:5px;
background:#333; /* Color de fondo de la marquesina */
border-bottom:1px solid #fff;
}
#menu-title h3 {
padding:0; margin:0;
color:#ccc; /* Color de texto de la marquesina */
font-family:Verdana, serif;
font-weight:bold;
font-size:130%; /* Tamaño de la letra de la marquesina */
}
#nav {
float:left;
width:100%;
margin:0; padding:0;
list-style:none;
background:#ccc; /* Color de fondo del menú */
border-bottom:1px solid #999;
}
#nav li{float:left; margin:0; padding:0;}
#nav a {
float:left;
display:block;
padding:6px 30px 6px 5px;
text-decoration:none;
font-family:Verdana, serif;
font-weight:bold;
font-size:90%; /* Tamaño del texto del menú */
color:#666; /* Color del texto del menú */
/* Color de fondo del menú */
background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieiV6HTl_I07RvDuLit7J4igNtIj5Ga0uGaYcD_Tg60XaetLuEXgqv2TfMX2Wg-UGuhg_maGnWZ_Q3eznn-pkzBsM3JUDzqFL87NJzMnccXep5ysRUie02sF5cZUxw8p9m2HBrgVdNdcE/s400/nav_slant.gif)no-repeat top right;
}
#nav #nav-1 a {padding-left:20px;}
#nav a:hover {color:#000;}
Ahora después de <body> pega lo siguiente:
<div id="menu-title">
<h3><marquee behavior="alternate">Aquí va el mensaje</marquee></h3>
</div>
<ul id="nav">
<li id="nav-1"><a href="URL del enlace">Inicio</a></li>
<li><a href="URL del enlace">Directorio</a></li>
<li><a href="URL del enlace">Contacto</a></li>
<li><a href="URL del enlace">Acerca de</a></li>
</ul><div class='clear'/>
Eso hará que el menú quede arriba de la cabecera, si lo deseas debajo de la cabecera o en otro lugar entonces entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript y pega ahí el contenido, ya después arrastra el elemento donde quieras.
Ya sabes que, lo que está en color rojo hay que remplazarlo por el mensaje de bienvenida y por las URL de los enlaces correspondientes. Para personalizar los colores y texto cambia las partes que están en color verde.
No hay comentarios:
Publicar un comentario