En
Blogger´SPhera vi un menú horizontal con caja de búsqueda,muy bonito. Quieren agregarlo a su blog? (ver DEMO en mi
blog de pruebas).Vamos a ver cómo hacerlo.
♠ Vamos a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Ahora, en la plantilla, vamos a buscar los siguientes códigos y modificamos lo que está en color naranja para que el código nos quede de los siguientes modos:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3'
showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='Aquí estará el nombre de tu blog' type='Header'/>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
♠ Una vez que hayamos cambiado los códigos anteriores, con CTRL+F buscamos
<body> y debajo de éste pegamos el siguiente código para que el menú esté encima de la cabecera, aunque en la demo la puse debajo de la misma:
<!-- Menu Superior -->
<div id="navtop">
<div class="nav">
<ul class="navtop">
<li><a href="http://PÁGINA-DE-INICIO-DE-TU-BLOG">Home</a></li>
<li><a href="http://PÁGINA-DE-TU-PERFIL" title="Perfil Blogger">Perfil</a></li>
<li><a href="http:PÁGINA-DE-TU-FEED" title="Feed">Suscribir a Feed</a></li>
<li><a href="http://PÁGINA-DE-CONTACTO" title="Contacto">Contacto</a></li>
</ul>
<form id="searchThis" action="/search" style="float:right; display: inline;" method="get"> <input onfocus="if(this.value==this.defaultValue)this.value="";" value="Buscar en este blog..." type="text" id="searchBox" onblur="if(this.value=="")this.value=this.defaultValue;" style="width: 180px; color:#5588aa; background: url(http://lh5.ggpht.com/_ecj_-xaKLE0/SQttzKrBZbI/AAAAAAAAASM/CoLwgeA0hI4/searchph.png) no-repeat right center;" vinput="" name="q"/> </form>
</div></div>
<!-- Fim Menu superior -->
Explicación:
» Reemplazamos los enlaces del código por nuestros enlaces.
»
title="Perfil Blogger" y los demás, será la palabra que aparecerá cuando pasemos el mouse por encima del botón del menú y podemos cambiarlo si lo deseamos.
» En esta parte podemos personalizar el buscador: color, el texto(cambiamos "Buscar en este blog..." por otro),etc.
♠ Ahora vamos con la parte que nos permitirá darle estilo a nuestro menú, cambiando colores, estilos,etc. Buscamos en la plantilla
]]></b:skin> y encima de éste pegamos el siguiente código:
Ver código completo [+/-].../*-- CSS Menu Superior-- */
#navtop {
background: #efefef;
height: 28px;
width: 100%;
margin: 0 auto 24px auto;
font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif;
font-variant: small-caps;
font-weight: bold;
color:#737374;
font-size: 14px;
border-bottom: 1px solid #afafaf;
padding: 0;}
.nav {
width: 630px;
margin: 0 auto;
padding:0;}
ul.navtop { padding: 0;}
ul.navtop li {
list-style: none;
display: inline;}
ul.navtop li a {
background: transparent;
color:#737374;
display: block;
float: left;
padding: 4px 7px 3px 7px;
margin-right: 3px;
text-decoration: none;
border-right: 1px solid #afafaf;
border-left: 1px solid #afafaf;}
ul.navtop li a:visited {
text-decoration: none;
color: #737374;}
ul.navtop li a:hover {
background: #5588aa;
color: #ffffff;
text-decoration: none;
border-right: 1px solid #afafaf;
border-left: 1px solid #afafaf; }
ul.navtop li a:active {text-decoration: none; color: #737374; }
ul.navtop li a:focus {color: #41a5c3; outline: 1px dotted #333; }
ul.navtop li.current_page_item a {
text-decoration:none;
color:#fff;
background: #E1477D;}
ul.navtop li ul { float:left; margin:0; padding:0; }
/* -----Fim Menu Superior ----- */
Explicación:
Ahora vamos a ver como está estructurado el código para poder ver qué partes podemos personalizarlas:
» La parte del código llamada
#navtop { nos va a permitir personalizar el color de fondo del menú, el ancho y la altura del mismo.
» La segunda parte
.nav { nos permitirá cambiar el espacio que ocuparán los botones y el buscador en el menú
» Si modificamos algo de
ul.navtop li a { podremos cambiar el color de cada cajita del menú, el color de los bordes y el tipo de éstos
»
ul.navtop li a:visited { permite confihurar el enlace visitado.
»
ul.navtop li a:hover { nos permitirá personalizar cómo se verá el botón al pasar el mouse.
Si quieres ver la
DEMO DEL MENÚ, puedes verla en mi
blog de pruebas.
Bueno, el resultado es éste:
