27.2.17

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 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?

No hay comentarios:

Publicar un comentario en la entrada

Gracias por visitar el blog! Siéntete libre de dejar tu opinión pero por favor se respetuoso. Si tienes un blog, en la brevedad trataré de pasarme por él :)