Buscador interno de Blogger mejorado

 

Y cuando digo mejorado, cabe dentro de las posibilidades de su diseño, comparado con mi anterior versión del buscador interno de blogger, porque es un buscador les funcionará perfectamente únicamente si hacemos modificaciones en modo de resumen con miniaturas, pero sin Javascript, pues si han hecho una búsqueda con este buscador -extirpado de la barra de navegación de blogger-, se darán cuenta que siempre da un número de resultados de entradas diferentes, sin respetar valores como max-result.

Esto es un dolor de cabeza para cuestiones de diseño; más si se te ocurrió agregar uno de los hacks de resúmenes con miniaturas que hay en la red, pues las páginas tendrán marcadamente diversos tamaños.

Como se ve en la imagen de arriba, que muestra el resultado final, agregaremos un bonito buscador interno en un plis-plas como un remedio temporal a la infuncional Caja de búsqueda.

Agregando el estilo, vamos a Diseño - Edición HTML y antes ]]></b:skin> pegamos el siguiente código:

/* buscador interno por cgnauta blog */
#contbuscint
{width:260px; /* Este es el ancho de todo el buscador */
margin:0 auto 0 auto; /* Quita el margin o ponlo a 0 si no quieres centrarlo */
}
#search-box
{
/* Agrega por ejemplo width:140px; para cambiar el tamaño de la caja de texto*/
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNHjEEjR5poiLEKOz0jq6MgfmqoJ7C5mFCig5apmrtmtnzs2n5XzL5mZT-r8w3GYVfrDr51J2nDxs_upOJulC_tzRGIh7KzA0eWlnEMzLvS269QJU_Fewa1JHLPRfxNaCtGRQkew/) 3px 3px no-repeat;
padding: 5px 5px 5px 35px;
border: 2px solid #000;}
#search-btn
{
padding:5px;
border: 2px solid #fff;
background:#000;
color:#fff;
}
#search-btn:hover
{padding:5px;border: 2px solid #000;background:#fff;color:#000;}
/* fin estilo buscador interno */

Guardamos nuestra plantilla.

Vamos nuevamente a Diseño - Elementos de la plantilla:

Y donde queramos ponerlo pulsamos en Agregar un Gadget:

Buscamos el artilugio HTML/Javascript y pulsamos en el "+":

Y agregamos el siguiente código:

<div id="contbuscint">
<form id="searchthis" action="/search/"  method="get">
<input id="search-box" name="q" type="text"/>
<input id="search-btn" value="Buscar" type="submit"/>
</form>
</div>

Pulsamos en Guardar y Listo.

Y mientras vuelve o funcionar la descompuesta Caja de búsquedas de Google, esto es lo que hay.