5 dic. 2012

Tutorial: poner buscador personalizado by yani-msn

Les vengo con un tuto personalizado y muy facilito ^^

Yo en el blog tengo un buscador abajo del traductor en la cajita rosada con pestañas.Para los que no saben:

click para ver en grande~


Ok, pues como muchas/os sabrán este es el buscador que yo tengo personalizado, echo por mi, que os
voy a enseñar los pasos para ponerlo y modificarlo al gusto de varias maneras nwn

Primero copiamos el siguiente código:

<style>
#search-btn {
background-color:#FFCAE4;
color:#FF148D;
margin:0;
font:bold 16px Comic Sans MS;
border:0;
}
#search-btn:hover {
cursor:pointer;
background-color:#FFAFCC;
}
#search-box {
color:#FFCAE4;
margin:0;
font:bold 16px Arial;
border:1px solid #FF148D;
width:150px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" type="text"/>
<input id="search-btn" value="Buscar ~" type="submit"/>
</form></div>
Pegamos el código en gadget HTML/Javasript y podemos modificar..:

Rosadito: código del color que quieras poner de fondo en el botón de busqueda
Rojo: código del color que quieras poner de la palabra ''buscar''
Verde: fuente de letra que quieras poner para la palabra ''buscar''
Azul fuerte: código del color del fondo del botón al pasar el cursor por encima
Azulito: color que quieres que salga para lo que estés buscando, para las palabras
Naranja: fuente de que quieras que salga para las palabras que estés buscando en el buscador
Amarillo: estilo del borde del buscador (dotted, dashed o solid)
Violeta: código del color que quieras que tenga el borde
Gris: la palabra que quieres poner para que inicie la búsqueda, como yo puse ''Buscar ~''

Bien, entonces poniendo todo a tu manera tienes el buscador personalizado sencillo y cute para tu blog ^^

Arriba del buscador puedes escribir ''Buscar en el blog'' o algo así o poner una imágen arriba con el siguiente código:

<img src="URL DEL IMAGEN ^^" />

En donde está en rojo pones el url de tu imágen que diga buscar o lo que deseen ^^
Y yaa~! ! Si te queda algo mal o algo te falla enseguida me lo comentas oki?n_n
Recuerda que el buscador lo he modificado y personalizado yo, si publicas este tuto no olvides dar mis respectivos créditos oki~?^V^
Dejenme sus coments<3




7 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. siempre tuve duda de tu menu!!gracias por aportarlo*o*

    ResponderEliminar
  3. Kuma:

    Gracias Kuma, ya visite tu blog y muy lindo, ya te sigo ^^ besos<3

    Dayana Cortes:

    Te refieres a la cajita rosadita con pestañas?este tuto explica solo el buscador cielo!>.< el tuto de como poner las pestañas ya lo he echo, te lo paso:http://allcuteanime.blogspot.com.es/2012/07/tutorial-hacer-una-cajita-con.html

    Gracias por pasar<3

    ResponderEliminar
  4. que bonito tutorial yani :D
    y re util tal vez lo use pero para mi otro blog q tengo
    si lo huso te doy creditos ^u^
    jejejejje
    kisses

    ResponderEliminar
  5. ♥auralovely chan♥:

    Jeje, muchisimas gracias hermosa >.<
    Clarow, mientras se ponga créditos se puede usar, no lo prohibo n_n
    Besitos<3

    ResponderEliminar
  6. muy buen aporte me encanto el buscador!

    ResponderEliminar

Gracias por dejar tu saludito ·ω· Si tienes algún error o necesitas ayuda con un tutorial, dale a ''haz click aquí'' en la cabecera y mándame un e-mail diciéndome lo que necesitas y si sólo tienes dudas de algo te contestaré en tu blog para que puedas verlo♥♥
––––•(-•RECUERDA: Si quieres afiliar y/o que visite tu blog, pídemelo en ''Afiliados'' en el menú de la cabecera, o en la C-Box (sólo en esos dos sitios, o sino no aceptaré)`•.¸¸.•´´¯`••._.•