Sencillo menú con buscador :Diversas y Variadas

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:

<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>

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:

18 opinaron:

Anónimo: Está hgenial; voy a probarlo en mi blog; 23.1.09
squirrel: Hola YK

Muy bueno; voy a probarlo el menú.

Sabes, tengo una pregunta, cómo puedo hacer para eliminar el mensaje de "Mostrando entradas con la etiqueta ..." que aparece cuando hago clic en una etiqueta de mi blog?

Un saludo; 24.1.09
Jéssica YK: Karina: sí, pruebalo y si tienes dudas me avisas.

Saludos; 24.1.09
Jéssica YK: squirrel: sí se puede eliminar; pero también puedes ocultarlo o personalizarlo.Mi próximo post va a ser sobre éste punto, se publicará el lunes asi que te pido un poquitín de paciencia y tendrás un post completo y detallado sobre el tema.

Saludos; 24.1.09
Anónimo: una preguntita como puedo quitar el margen que queda arriba? se mira muy feo,gracias de antemano.; 21.9.09
Jéssica YK: gairokux: cuál margen? lo que veo en tu blog es la cabecerá, luego una línea gruesa de color azul, luego el menú; la línea que deseas eliminar es esa línea azul gruesa?

S@lu2; 21.9.09
Anónimo: si,es esa linea pero ya lo resolvi,
gracias por contestar tan rapido ^^; 21.9.09
Jéssica YK: gairokux: me alegra que ya lo hayas solucionado; gracias a ti por la visita :)

S@lu2; 24.9.09
Francisco: HOLA JESSI COMO ANDAS? UNA VEZ VENGO EN BUSCA DE TU AYUDA.....MIRA VOS SABES QUE YA TENGO INCORPORADA ESTA BARRA HORIZONTAL en el blog de http://loglobalizo.blogspot.com, QUIERO SABER COMO DEBO AGREGAR UN CASILLERO MAS Y TRATE DE ACTUAR POR IMITACIÓN Y NO ME SALE!

QUERIA VER SI PODIA AGREGAR UNA O DOS CELDAS MAS AL LADO DE CONTACTO.

GACIAS JESSI, CDO VOS PUEDAS.

BESOS; 25.1.10
Jéssica YK: » Francisco:
Para agregar un casillero más, busca esta parte en tu plantilla:

<ul id='menus'>

Debajo de ese código, pega lo siguiente:

<li class='page_item page-item-2'><a href='Aquí-el-enlace' >Nombre-del-enlace</a></li>

Luego, puedes cambiarlo de lugar, después del casillero, Home, Contacto, etc, pero siempre antes de </ul>

Gracias por la visita :)

S@lu2; 25.1.10
Francisco: Muchas gracias Jessi, vos sabes que hice lo mismo en la mañana y no me funcionó, q raro? ahora si.

Gracias de nuevo.

Besos; 25.1.10
Jéssica YK: » Francisco:
Me alegra que lo hayas solucionado :)

S@lu2; 27.1.10
Francisco: Hola Jessi!, te comento que estoy haciendo unos arreglos en Lo Globalizo (de paso te invito a que veas si quedó mejor??) pero me surge un problema y no se como resolverlo.

La plantilla nueva trae un buscador incorporado.
1 pregun: ¿sirve de la misma manera que el que nos brinda adsense? si la respuesta es si, no tengo ningun problema.

2 pregunt: Sino cumple las mismas funciones que el que nos brinda Adsense x busqueda ($$$) como puedo hacer para quitarlo, porque hice un par de pruebas y me da la impresión de que rompo la estructura de la plantilla.

Te dejo la imagen para que no queden dudas de lo que hablo.

http://img138.imageshack.us/img138/5104/buscadors.png

Desde ya gracias y como siempre cuando vos puedas.

Beso; 23.9.10
Jéssica YK: » Francisco:
Ese buscador que viene incorporada a la plantilla no sirve de mucho para el AdSense, yo te recomendaría que uses el buscador de Google AdSense.

Para quitar el buscador, sigue estos pasos:

► Entra a Diseño - Edición de HTML y has click en Expandir Plantilla de artilugios es muy importante que lo hagas.

► Busca el siguiente trozo de código , debes de tener cuidado de sólo borrar esta parte porque puedes afectar otras partes de la plantilla:

#search {
margin: 0 0 10px 0;
height:28px;
padding:10px;
width:328px;
float:right;
border:1px solid #DEDBD1;
background:#F5F4F0;
}
#search form {
margin: 0;
padding:20px auto;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size: 85%;
}
#s {
margin-left:5px;
float: left;
width:200px;
padding: 4px 7px;
border:1px solid #dfdfdf;
font: normal 100%;
color:#422108;
}
#searchsubmit {
margin-right:25px;
float: right;
margin-top: 0px;
background: #F4A006;
border: none;
font: bold 100% ;
color: #fff;
height:25px;
line-height:24px
}

► Ahora busca el siguiente trozo de código y bórralo:

<div id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Search'/>
</form>
</div>

Antes de guardar cambios, mira la plantilla en Vista Previa; si no hay problema alguno, da click en guardar.

Ya me avisas cómo quedó.
Por cierto, tu página está muy bien!

S@lu2; 23.9.10
Francisco: Idola!!! Como siempre salvandome las papas!!

Muchas gracias una vez mas! Me alegro q te haya gustado el blog.....Besos; 23.9.10
Jéssica YK: » Francisco:
Me alegra que se haya solucionado el problema ;)

Sigue adelante con el blog!

S@lu2; 29.9.10
Venusina: En mi plantilla no aparecen esos codigos ya los vusque varias veces ayuda x favor gracias; 20.1.13

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

Sencillo menú con buscador

18 opinaron:

Suscríbete!

Etiquetas

Archivo [+/-]

Agrega este blog

Blogroll

Recomendados

Útiles

Información

Algunos datos