Este es un lindo buscador con diseño muy especial. Se trata de un buscador de papel...
Para ponerlo en el blog sigue los siguientes pasos...
Diseño>edición HTML>expandimos artilugios
Busca la etiqueta ]]></b:skin> y encima pega estos bloques de CSS:
#buscador #s {
-x-system-font:none;
height:26px;
color:#333333;
background:transparent url(http://i695.photobucket.com/albums/vv317/elbalcondejaime/search_bg.jpg?t=1245957973) no-repeat scroll 0 0;
padding:4px 0 4px 7px;
font-stretch:normal;
font-style:normal;
font-size-adjust:none;
font-family:Verdana;
font-size:12px;
font-weight:normal;
line-height:normal;
font-variant:normal;
margin-right:-4px;
vertical-align:top;
width:150px;
}
#buscador #searchsubmit {
text-align:center;
background:transparent url(http://i695.photobucket.com/albums/vv317/elbalcondejaime/nav_bg.jpg?t=1245957954) no-repeat scroll 0 0;
height:26px;
color: #5c5c5c;
font-family: Segoe Script;
width:56px;
font-weight:bold;
}
#buscador input {
border:0 none;
}
Guarda cambios.
Diseño>añadir gadget (elemento de página)>html-javascript
Pega este código:
<div id="buscador">
<form id="searchform" action="/search" method="get">
<p><input id="s" value="Buscar..." name="q" type="text"/>
<input id="searchsubmit" value="OK" class="bt" type="submit"/></p>
</form>
</div>
Para plantillas de fondo negro...
Te dejo aquí la dirección de las imágenes con fondo negro para tu buscador:
1) http://i695.photobucket.com/albums/vv317/elbalcondejaime/a4columnas4columnas2.jpg?t=1246295661
2) http://i695.photobucket.com/albums/vv317/elbalcondejaime/a4columnas2.jpg?t=1246295562
Debes sutituir las direcciones por las anteriores, teniendo en cuenta los colores (rojo y verde).
Guarda el gadget y listo ^_^
Hola Jaime !!!
Me ha encantado este buscado y lo he puesto en mi blog de pruebas y quería hacerte dos preguntitas.
-Se puede sacar la palabra "buscar" que sale por defecto??
-El efecto que tiene el tuyo no me queda igual. Me explico, en mi blog queda todo un rectángulo entero, y veo que a ti te queda como con las esquinas desdibujada, no se si me explico ...
Gracias
Marga
Marga, para que no aparezca la palabra 'Buscar' usa este código en lugar del segundo:
<div id="buscador">
<form id="searchform" action="/search" method="get">
<p><input id="s" value="" name="q" type="text"/>
<input id="searchsubmit" value="OK" class="bt" type="submit"/></p>
</form>
</div>
En cuanto a lo del borde, no es ningún fallo, esque las imágenes de los papeles están creadas para fondos blancos.
No te preocupes, pronto añadiré imágenes para que puedan usarse en fondos negros. ^_^
Muchísimas gracias Jaime !!!!
De todas formas queda muy chulo.
Marga.
Marga, ya están las imágenes para fondo negro ^_^
Que amable eres Jaime, muchísimas gracias!!!
Verás, después de probar los dos, al final me quedo con el primero, creo que los colores quedan super bonitos con el fondo granate. Si quieres pásate a verlo y me dices ...
Gracias.
Marga
Marga, es un placer poder ayudarte, aunque soy un poco torpe con el photoshop :-S ahora mismo me paso. ^_^
Saludines =)
Gracias Jaime, como te dije lo quité para ver si se me solucionaba el tema del fondo, pero ya lo h vuelto a poner y queda muy bien.
Quedo a la espera de tu "truquillo" para solucionarlo.
Graaaaaaaaaaaacias !!!
Marga
Marga, me alegra que te guste el resultado ^_^ Ya te envié el correo para que puedas arreglar el fondo de tu blog. =)
¡¡Saludines!! ^_^
Guau, me gusta mucho este buscador. Me gustaria usarlo en mi blog donde ya puse otra cosita en estilo papel, pero la plantilla que uso tiene por defecto un buscador. ¿Sabes cómo puedo quitarlo y usar este tuyo? El gadget aparece en la pantilla de elementos de página pero al estar por defecto ni puede modificarse ni eliminarse. A ver si puedes echarme un cable.
Gracias.
You me and a cup of tea, prueba a realizar lo siguiente:
Diseño>edición HTML>expandimos artilugios
Busca esta línea:
<div id="sidebar-wrapper">
Y un poco más abajo encontrarás esto:
<form method="get" class="search" action="/search">
<input type="text" value="" name="q" id="s" class="searchbar">
<input type="submit" value="" class="searchbut">
</form>
¡Bórralo y listo! (Haz vista previa para comprobar el resultado ;)).
¡Hola Jaime!
El buscador está muy bien diseñado, pero tengo una duda... ¿Cómo hago para que no distinga tildes y encuentre todo por igual?
Carlos, en ese caso necesitas hacer uso del
buscador de Google que ofrece blogger.
Si necesitas algo más dímelo.