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 == "") this.value = "Buscar...";" onfocus="if (this.value == "Buscar...") this.value = "";" 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".
*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?
