20.7.12

{Tutorial} Buscador personalizado

Para hacer tu propio buscador en tu blog personalizado lo aremos por pasos muy sencillos.

1°-Abre un gadget - HTML/javascript

<center><img src="URL DE EL TITULO" />
<form action="/search" method="get"> <img src="URL DE IMG IZQUIERDA" /> <input type="text" name="q" value="" style="width:160px; height:19px; background-color:#ffffff; color: #918e90; font-size: 11px; border: 1px double #918e90;border-radius:5px;box-shadow: 0 0 0.4em #918e90 , 0 0 0.4em #918e90;" /> <img src="URL DE IMG DERECHA" />
<br />
<br />
<input type="submit" value="TU TEXTO AQUÍ" style="font-size: 12px; background-color:#ffffff; color: #ffaad5; border: 1px dashed #918e90;border-radius:5px;" /></form></center>

Remplaza la parte que dice URL DE EL TITULO con el URL que te doy- elije el url que este debajo de la imagen que te guste

http://i.imgur.com/yfGi2.png

http://i.imgur.com/cm0eZ.png

http://i.imgur.com/qKU1U.png

http://i.imgur.com/Gakq9.png

http://i.imgur.com/Al2CN.png

http://i.imgur.com/Gec2o.png
http://i.imgur.com/9SO1N.png

http://i.imgur.com/9yVDM.png

http://i.imgur.com/6NjCu.gif


http://i.imgur.com/cNTuh.gif

Remplaza la parte que dice URL DE IMG IZQUIERDA por algún url que te doy y también remplaza URL DE IMG DERECHA toma el url de algún pixel y ponlo del lado derecho o izquierdo de la barra de búsqueda.

http://www.cursor-switch.com/images/19.gif

http://www.cursor-switch.com/images/22.gif

http://www.cursor-switch.com/images/25980.gif

http://www.cursor-switch.com/images/25952.gif

http://www.cursor-switch.com/images/25909.gif

http://www.cursor-switch.com/images/25834.gif

http://www.cursor-switch.com/images/25866.gif

http://www.cursor-switch.com/images/25645.gif

http://www.cursor-switch.com/images/25644.gif

http://i1246.photobucket.com/albums/gg613/Spens-l0ve/th_ala-izquierda-spens-l0ve-books-love2.gif

http://i1246.photobucket.com/albums/gg613/Spens-l0ve/th_ala-izquierda-spens-l0ve-books-love4.gif


Remplaza la parte que dice TU TEXTO AQUÍ por lo que en mi imagen dice (~Enter para buscar~)
Remplaza lo AZUL por el código HTML del color de fondo de la parte del buscador
Remplaza lo MORADO por el color del buscador
Lo ROJO por el fondo de la parte del texto que en mi imagen dice (~Enter para buscar~)
Cambia lo VERDE por el color de el texto de (~Enter para buscar~)
Cambia lo NARANJA que es el color de el borde de enter para buscas


Créditos a:Annyz  

6 comentarios:

♥auralovely chan♥ dijo...

que bonito *oo*
necesitaba cambiar la letra
mill gracias
to blog quedo re lindo !!!
*ooooooo*
jejeje que bonito!!

Tú espacio ♥ dijo...

hola neni woow tu entrada esta super me gusta mucho que compartas la forma de hacer las cosas y no solo el llegar y decir tengan yo lo hice denme creditos sino el que compartas lo que sabes ñ.ñ
te sigo neni excelente blog (:

yaoisaotaku dijo...

Muchas grasias por la tuto ^^
Voy a usarla si no te importa u//u
He mirado millones pero lo que me fastidio es la url de las imagenes pero como las das tu me has salvado la vida >///////<
Te quiero muchoooo!!!
Grasias grasias ¡¡
Tienes un blog hermosisimoo¡¡
Lo amee >^< Bye~

annyz dijo...

hola nena te agradeceria mucho el credito aqui n.n saludos

Mizuki Chan ^^ dijo...

Owww! que padree, me encanto etto.. yo soy nueva y al verdad no se mucho, me gustaria tomar tu tutorial y aplicarlo en mi blog, pero etto.. como pongo los creditos DX que padre ^^

luisa dijo...

muy lindo gracias