Newsletter

TUTORIALES BLOGGER | PERSONALIZAR BUSCADOR

20 de junio de 2016

Feliz inicio de semana queridos lectores, empezamos una semana más y la iniciamos con un nuevo Tutorial. Hoy les mostraré como Colocar un buscador personalizado como el que yo tengo y les muestro a continuación:


Para tener este buscador utilicé dos códigos porque se me hizo más fácil así para darle forma. 



Instalación:

La instalación es muy muy fácil, aunque son dos códigos no tienen nada del otro mundo y ahora les explico que hacer.

1) Primero vamos a Diseño → Añadir un Gadget → HTML y añadimos el siguiente código:

<center>

<img src="https://2.bp.blogspot.com/B2s2rI1rzuk/VyO4Q0he4dI/AAAAAAAADPg/nsY6lstz0vww-hriPkpNA5snYEdwOvruQCLcB/s1600/buscador.jpg" / />

<form action="/search" id="search" method="get" name="searchForm" style="display: inline;">

<input id="search-box" name="q" onblur="if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;" onfocus="if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;" size="28" type="text" value="Buscar..." /></form>

</center>


Cambios:

En este código lo único que tenemos que cambiar es:

♥ Lo que está en Verde: Dirección de la imagen que dice ¿Buscas algo?. Más abajo les dejaré algunos diseños por si no les gusta el que tengo.

♥ Lo que está en Rojo: Es la palabra que va dentro de la cajita, yo tengo (Buscar...) Ustedes coloquen lo que quieran.


2) Una vez colocaste este código en el Gadget nos queda darle forma a la cajita. Para eso nos dirigimos a plantilla → Personalizar → Opciones Avanzadas → Agregar CSS. y añadimos el siguiente código:

#search-box {
border: 1px solid #eeeeee; /* Ancho y tipo de línea */
height:34px; /* Altura de la caja */
width:226px; /* Ancho de la caja*/
font: normal normal 13px 'Arial', ans-serif; /* Tipo y tamaño de letra dentro de la caja */
color: #000; /* Color de las letras */
letter-spacing: 1px; /* Separación entre letras */
text-align:center; /* Para centrar la palabra dentro de la caja */
border-radius: 0px 10px 0px 10px; /* Borde del cuadro del buscador */
}


Cambios:

Ya nombre a que corresponde cada línea del código, pero profundizaré un poquito más en todo:

 Para cambiar el ancho y tipo de linea de la caja en esta entrada te muestro las lineas que puedes usar.

 Altura y Ancho de caja depende del tamaño de tu columna, a mi me funcionan esos valores pero los puedes cambiar hasta que encuentres los indicados.

 Tipo y tamaño de las letras dentro de las cajas, esto también es a tu gusto.

 Color de las letras, yo utilizo negro pero si quieres otro color esta página es ideal para eso.

♥ Separación entre las letras yo tengo 1px, mientras más alto el valor mas separadas estarán las letras unas de otras.

 Center: centra la palabra buscar, left si lo quieres a la izquierda, right si lo quieres a la derecha.

 Y por último las esquinas de la caja, si se dan cuenta yo tengo dos esquinas redondeadas, si la quieres todas rectas deja todos los valores en 0 y si la quieres todas redondeadas las dejas todas en 10.

con estos códigos tal como los muestro te quedaría el buscador igual que a mi, es decir, así:

Aquí te dejo otras imágenes con la frase ¿Bucas algo? para elegir. Si te gusta alguna sólo tienes que colocar el raton encima de la que elijas, haces clic derecho sobre la imagen y seleccionas la opción "Copiar dirección de la imagen" esa será la dirección que utilizarás en el primer código que te dí.
                    

Y hasta aquí el tutorial de hoy, espero que te sea de ayuda, si te gustó compártelo me ayudarías mucho. Gracias por leerme.

Besos!!

2 comentarios:

  1. ¡Muchas gracias por el tutorial! *-* Me es muy útil, así que espero ponerlo en práctica pronto, que me gustaría cambiar el buscador que tengo ahora ^^

    ¡Besos!

    ResponderEliminar
  2. Me encantan estos tips! yo no sé nada acerca de blogger así que me vienen perfecto, cuando tenga más tiempo lo intentaré.
    Gracias!! n.n

    ResponderEliminar