Tutoriales | Personaliza tu buscador

Hola a todos, ¿cómo están? Espero que tengan un muy buen comienzo de semana, y el día de hoy, les traigo un tutorial para personalizar su buscadores de blogger. Es bastante sencillo, así que empecemos.

Para que no sea muy complicada, lo vamos a dividir en dos pasos.

1)

1.a Vamos a Diseño ▶️ Añadir un Gadget ▶️ HTML 

1.b Añadimos el siguiente código

<center>

<img src="Url de imagen" / />

<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="Texto" /></form>

</center>

Rojo: Si desean poner una imagen arriba del buscado (como por ejemplo ¿Buscas algo?, y abajo la cajita del buscador) aquí van a colocar el URL de la imagen, si es lo que desean.

¿Y si no quiero imagen? No hay ningún problema. El mío, por ejemplo, no tiene. Simplemente lo que van a hacer es borrar toda esa linea.

<img src="Url de imagen" / />

Verde: Es el texto que va dentro del buscador. Si se fijan, el mío dice "¡Escribe y presiona enter!" Aquí pueden poner lo que ustedes deseen.

1.c Una vez terminado de editar, le damos a guardar.

2)

2.a Ahora vamos a plantilla ▶️ Personalizar ▶️ Avanzado ▶️ Agregar CSS.

2.b Pegamos 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 */

}

Al lado, ya se indica para que sirve cada línea pero vamos hacer un par más de aclaraciones.

*Ancho y tipo de línea*: 

-El n° sirve para darle más o menos grosor a la línea. 

-En el ejemplo tenemos una línea sólida. Aquí abajo les dejo los otros tipos de línea. Vean cual les gusta más y donde dice "solid", lo reemplazan por la palabra que aparece en el centro del recuadro.

-El # es el color que va a tener la línea. Si desean cambiarlos, copien el código HTML del color que más le gusta y listo.

*Altura y ancho*

Si mal no recuerdo yo mantuve esos valores, pero ustedes pueden modificarlo del modo que más les convenga. 

*Para centrar la palabra dentro de la caja*
Si desean que esté centrado el texto,lo dejan tal cual como está. Si desean que esté alineado a la izquierda, borran la palabra center y escriben "left". Y si desean que esté alineado hacia la derecha, escriben "right".

Eso es todo por el día de hoy. Espero que les haya gustado y si tienen alguna duda pueden dejarlas en los comentarios o mandar un mail. ¿Les sirvió? ¿Qué otros tutoriales les gustaría ver en el blog próximamente?