Los blogs en Blogger cuentan por defecto con un buscador interno ubicado en navbar o barra de navegación, sin embargo, no es posible personalizarlo y adaptarlo a las necesidades de nuestro diseño. Por otro lado, con html y xml es posible replicar este buscador interno y adaptarlo completamente a nuestro gusto con estilos CSS.
Estructura HTML/XML
Como todo buscador, es necesario trabajarlo como un formulario con dos entradas en él, en otras palabras, una etiqueta form y dos input con lo valores de blog para procesar la búsqueda. El código es como el siguiente:
<div id='buscador'>
<form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'>
<div>
<input class='searchtext' id='q' name='q' type='text'/>
<input class='searchsubmit' type='image' name='submit' src='http://sitio-de-hosting.com/search.gif'/>
</div>
</form>
</div>El primer input es el campo de texto donde el usuario escribirá su consulta, el segundo input es el botón para enviar la consulta escrita en el primero. Este segundo input además viene definido como tipo imagen (que bien puede ser un icono), por lo que solo hay que poner la ruta a nuestra imagen en el atributo src (src=”ruta”), dicha ruta puede obtenerse subiendo la imagen a un hosting gratuito como Imageshack o Photobucket. Es lo único que necesita modificarse en el código anterior.
Este código se puede agregar justo después del código (En Diseño/Edición de HTML):
<div id='sidebar-wrapper'>para que aparezca en la parte alta de la barra lateral, aunque igual funciona en cualquier otra ubicación.
Estilos CSS
A partir de las clases e identificadores se puede dar estilo al formulario: aplicarle un fondo, bordes, formato al texto, espaciamiento, etc. con CSS. Creando un ejemplo sencillo:
/* Buscador.
Contenedor principal: form */
#buscador form {
border:1px solid #999999;
background:#E5E5E5;
padding:10px;
margin:0 10px 15px;
position:relative;
}
/* Canpo de texto */
.searchtext {
padding:2px 5px;
color:#999;
font-size:11px;
line-height:15px;
height:15px;
width:87%;
border:2px solid #BBDAFD;
}
/* Botón de submit */
.searchsubmit {
position:absolute;
right:10px;
top:10px;
}Y el resultado de estos estilos es algo como lo siguiente:
Buscador después de aplicarle estilos
Este es solo un ejemplo, pero puede usarse modificando la ruta de la imagen en el input, colores de fondo y bordes, el ancho y los margenes, etc. El código CSS siempre se coloca antes de:
]]></b:skin>Resulta sencillo y vistoso arreglar este importante elemento de nuestro blog.
Hola!
Muchas gracias por esta información. La pondré en practica en un template que estoy diseñando, no obstante quisiera saber si puedo adaptarla a la casilla de búsqueda con Adsense?
Gracias y hasta pronto!
No podrías modificar este para que acepte adsense, sino tendrías que poner directamente el código de adsense para búsqueda y ver las clases e identificadores que usa para adaptarlo con css.
Hey man, have you seen that Blogger added a new way to display comments? It’s similar with WordPress. The comment form is available at the end of the posts.
Just go at Settings> Comments to see it.
I was wondering if you can update the Blogger templates so they can have this new feature.
Thank you
Hola francisco, lei tu articulo de los adsense en blogger.
Me podrias decir como poner los adsense entre final de post y principio de comentarios?
Asi es como te digo
http://img19.imageshack.us/img1/4407/protcvu9.jpg
desde ya muchas gracias
por favor me explicas bien lo del CSS, que es para cambiarle el diseño??
porque lo del HTML ya se como se hace… pero si pongo el CSS en HTML no sale nada, solo las letras.. y querria cambiar el diseño..
desde ya gracias por tu ayuda..
thanks
thanks
Hola, seleccioné una plantilla que ya tiene un buscador, no me gusta su estilo y no tengo idea de como cambiarlo. Alguien me puede dar una mano?? Gracias!!!
hola. me quedo muy bien , pero tengo una pregunta? me aparecio un texto que dice, enviar consulta. como lo puedo modificar?
gracias..
hey lo logre.. gracias..
Hola está muy este post y otros más, me interesa mucho tu página, lo que quería saber es como modificar en mi blogger la parte de comentarios, para que los usarios puedan poner su nombre,mail y web.
Hola!
En primer lugar te felicito por el post!
Quería comentarte unos “problemillas que tango” a ver si me puede ayudar.
En primer lugar en mi blog (formadores-ocupacionales.blogspot.com) use una plantilla de WordPress adaptada para Blogger.
Con determinado Gadgets, coge el fondo marrón de la plantilla (puedes verlo en el cuadro de “Suscripción por correo” que sale con un marrón terrible para la pagina), así que cuando intento meter el buscador de google me sale igual, todo un cuadro marrón terrible.
He leído que se adapta a la plantilla que tienes, así que supongo que lo hace automáticamente ¿se puede cambiar por otro color el fondo del Gadget por el color blanco?
No sé cómo solucionar estos problemas, te estaría agradecido si me pudieras ayudar.
Gracias ¡¡
Leí tu articulo, pero aun así no puedo hacer que el buscador que trae integrado el template funcione… =S
Que otra forma hay?
Tnks!
@Alejandra, a mi nunca me ha fallado, quizá tienes algún valor aun mal, igual checa el tutorial que recién hizo @gema.
Hola, una pregunta rápida sobre el buscador en Blogger.
Resulta que tengo un blog con más de 300 entradas, decidí crear otro e importar al nuevo las entradas.
Pues bien, ahora en el nuevo, luego de publicar las entradas, no me funciona ni el buscador simple del widget de Blogger, ni el truco que se comenta en esta entrada, simplemente me da un aviso de “No hay resultados.”
¿Es que si se importan entradas de otro blog a uno nuevo ya no se le puede poner buscador al blog nuevo? ¿Hay otra manera?
MUCHISIMAS GRACIAS POR TU GRAN AYUDA, NO CABE DUDA QUE GENTE COMO UD ES DE LO MEJOR POR QUE COMPARTEN SU CONOCIMIENTO, VOY HACER UNA PAGINA WEB DE SOFTWARE LIBRE DE VIRUS, PROMOSION DE SOFTWARE, PARA AYUDAR A LOS FABRICANTES DE SOFTWARE.
Francisco, la Navbar de google solo busca etiquetas o también puede buscar palabras que haya escritas en las entradas. En mi blog solo encuentra etiquetas y he visto otros que también buscan palabras insertadas en las entradas. Te agradecería me aclarara o indicaras como puedo corregirlo.
La verdad mano magnifico la aportacion que ahce ud en esta materia y que bien felicidades por su avance y de darnos su apoyo. gracias de antemano.
Profesor Francisco, intenté aplicar tu ejemplo y no me funciona.
No tengo el código en mi html. Lo puse justo debajo de /* Header
———————————————– */
Al guardar no me indica errores pero no aparece en mi blog.
Si puedes ayudarme te lo agradeceré. Saludos
Aunque doy por hecho que sabrás a qué código me refiero es el div id= sidebar-wrapper (le anulé los caracteres especiales porque parece que no los acepta para pasar el comentario).
GUILLRTMO:
Hola a todos, me encuentro en una encrucijada al querer hacer conocer una metodologia de enseñanza, soy Profesor de Geografia y como toda ciencia humana, esta el hombre en el centro, por eso que decidi afrontar el temporal solo y dar una metodologia que consiste en estudias la sociedad a traves de los dichos y costumbres, no es nuevo, se llama Paremiologia la ciencia de que estoy hablando, y decearia saber si existe alguna forma de darla a conocer, antes que me sigan diciendo los directivos que “como les das semejante pavada a los alumnos”
Hola, estoy intentando implementarlo en mi blog Bitnavegantes () pero no consigo hacerlo funcionar, si visitas mi blog lo podrás ver justo encima de mi identificación de Google Plus.
¿Puede ser algo referente a si es doble comillas o comillas simples?
Bueno, ya no hace falta, he encontrado la manera de que funcione, gracias