Agregar un buscador

Por alguna razón que desconozco, Blogbar la barra de búsquedas que había incluido, dejó de funcionar. El problema no era visible en Firefox, pero, al usar Internet Explorer, las páginas no se cargaban y muchas imágenes desaparecían misteriosamente.

No le encontré solución así que decidí quitarla pero, como quería tener algún buscador incorporado, me puse en campaña y recorrí la web de uno a otro lado. Nada me convencía. Por fin, me encontré con una rutina en PurpleMoggy's Blog que, si bien no satisfacía mis necesidades, me permitiría adaptarla con cierta facilidad.

Lo que sigue es la explicación del elemento búsqueda que está en en la barra lateral del blog, bajo el título BUSCAR AQUI Y ALLÁ.

La idea de la llamada Searh Box 4-in1 creada por PurpleMoggy es tener la posibilidad de seleccionar entre cuatro tipos de búsquedas diferentes: en el blog, en Google, en Blogger y en Technorati. La primera es igual que buscar desde la barra superior, la segunda y la tercera utilizan Blogsearch y la tercera busca entradas del blog, dentro de Technorati. Como ninguna hace una búsqueda normal. Se me ocurrió dejar lo esencial y modificar las acciones de los formularios para que, simplemente, buscaran en mi blog y en Google.

Se necesitan tres cosas, una serie de declaraciones de estilo CSS, una rutina JavaScript y un elemento HTML en donde insertar el código en si mismo.

El script es igual al original, salvo que he quitado dos de las opciones y debe ser agregado en el HEADER de la plantilla:

<script type='text/javascript'>
//<![CDATA[
var search_which_one = "pm-f-h";
function selectH() {
document.getElementById('li-h').className = 'pm-search-selected';
document.getElementById('li-g').className = 'pm-search-unselected';
document.getElementById('pm-search-h').style.display = 'block';
document.getElementById('pm-search-g').style.display = 'none';
document.getElementById('pm-f-h').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-h";
}
function selectG() {
document.getElementById('li-h').className = 'pm-search-unselected';
document.getElementById('li-g').className = 'pm-search-selected';
document.getElementById('pm-search-h').style.display = 'none';
document.getElementById('pm-search-g').style.display = 'block';
document.getElementById('pm-f-g').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-g";
}
//]]>
</script>

Ahora, el código CSS mínimo que debe insertarse dentro de la sección de la plantilla.

div#pm-search {margin: 0; padding: 0;}
div#pm-search ul {margin: 0; padding: 0; text-align: center;}

div#pm-search li {
/* blanquear estilos previos */
list-style-type: none;
display: inline;
cursor: pointer;
background-image: none;
text-indent: 0px;
margin: 0; padding: 0;
/* ... agregar tipo de fuente, colores, etc ... */
}

div#pm-search form {margin: 0; padding: 0;}

/* estilo de los vínculos de selección */
div#pm-search-h {display: block;} /* visible por defecto */
div#pm-search-g {display: none;} /* oculto por defecto */

.pm-search-selected { } /* del tipo seleccionado */
.pm-search-unselected { } /* del tipo no seleccionado */
/* ... agregar tipo de fuente, colores, etc ... */

.pm-input { } /* cuadro ingreso textos */
.pm-boton { } /* pseudo-botón ejecutar la búsqueda */
/* ... agregar tipo de fuente, colores, etc ... */

Lamentablemente no puedo dar demasiados detalles porque todo va a depender del tipo de plantilla, de color de fondo, etc. En este caso, no queda más remedio que recurrir al viejo método de PRUEBA Y ERROR hasta lograr el efecto gráfico que se deseado.

Por último, este es el código que debe ser insertado en un elemento HTML en la barra lateral. Personalmente, me resultó más cómodo incluirlo en una tabla pero pueden probarse otras alternativas.

<div id="pm-search" align="center">

<ul>
<li id="li-h" class="pm-search-selected"
onclick="selectH()">AQUI</li>
<li id="li-g" class="pm-search-unselected"
onclick="selectG()">GOOGLE</li>
</ul>

<!-- busqueda en el Blog -->
<div id="pm-search-h" align="center">
<form action="URL_DEL_BLOG/search" method="get">
<input id="pm-f-h" class="pm-input" value=""
name="q" size="25" type="text"/>
<input class="pm-boton" value="BUSCAR" type="submit"/>
</form>
</div>

<!-- busqueda en Google -->
<div id="pm-search-g" align="center">
<form action="http://www.google.com.ar/search" method="get">
<input value="es" name="hl" type="hidden"/>
<input id="pm-f-g" class="pm-input" value=""
name="as_q" size="25" type="text"/>
<input class="pm-boton" value="BUSCAR" type="submit"/>
</form>
</div>

</div>

AGREGAR UN BUSCADOR (Search Box)

Searh Box 4-in1

w3.org - FORMS

December - FORMS