Cuando inicie en el mundo de Blogger, para tener un buscador en mi blog tenia que agregar un código externo que creaba esta tarea, pero hoy ya contamos con el gadget Cuadro de búsqueda, el cual en medida de utilidad es de gran relevancia en cualquier blog. El buscador permite agregar opciones independientes que podemos configurar, estas son: búsqueda en tu blog, en la lista de tus blogs y desde Internet.

1. Como agrego este gadget a mi blog

Para agregarlo a nuestro blog vamos a la opción Diseño, agregamos un nuevo gadget, para ello damos clic en el enlace llamado de la misma forma, una gran lista de gadgets populares incluidos a continuación, buscamos el llamado Cuadro de búsqueda y lo agregamos.

Al ser agregado una nueva ventana aparece con algunas casillas que debemos marcar o desmarcar para elegir la edición que mejor convenga, algunas de ellas son las siguientes con una descripcion breve.

Este blog: Todos los resultados que arroja el buscador solo son de la referencia de nuestro blog.
Acceso desde aquí: Busca enlaces en tu entrada para hacer la búsqueda de acuerdo a ellas. 
Internet: Busca en toda la Internet arrogando resultados de cualquier web o blog alojado en Internet.
Lista de blogs y enlaces: Efectúa búsquedas en los sitios que están agregados en nuestras listas.

Al terminar de editar lo anterior, lo ubicamos en la parte donde queramos que se muestre.

2. Cambiando el aspecto de la Caja de búsqueda

Cambiando las propiendas del botón Buscar

Usemos dos códigos, en el primero cambiaremos el color de fondo del botón, así como el color de letra de la palabra Buscar. En este código se pueden cambiar los colores simplemente modificando los códigos hexadecimales de colores, por ejemplo el color de fondo (background) es #000000 que es igual a negro, podemos cambiarlo a #c00000 que nos dará un fondo rojo en el botón. .

input.gsc-search-button {
color: #FFFFFF;
padding: 3px 5px;   
background: #000000;
border: 0px solid #FF8000;
} 

El código siguiente lo usaremos para que al pasar el mouse por el botón de Buscar este cambie de color, el color también puede ser asignado mediante un código hexadecimal de color.

input.gsc-search-button:hover {
background:#FF8000;
}

Cambiando las propiedas de la caja de busqueda

Este código cambiara de forma notable el tamaño de la caja de búsqueda, así como la fuente del texto y por supuesto el color de fondo si modificamos en atributo background:

input.gsc-input {
color: #777777;  
font-size: 11px;  
height: 27px;  
text-shadow: 0 1px 1px rgba(0,0,0,.6);  
background: #FFFFFF;  
}

Cabe resaltar que estos códigos deben ser escritos antes de ]]></b:skin>

El resultado final sera este.

Con algo de ingenio podemos agregar atributos como el radius, una imagen de fondo, y algunas otras cosas interesantes para mejorar este buscador, solo es cuestión de creatividad e iniciativa.

Códigos Hexadecimales mas comunes │ Tabla de colores