BUSCADOR PARA EL BLOG....

Esta entrada la saque de La Blogueria ya que la encontre muy buena para la busqueda de contenidos del Blog

Un buscador interno es un elemento indispensable en un blog. La mayoría de los buscadores incluyen también un campo de búsqueda en Google, pero podemos extender las opciones: con esta caja damos a nuestros lectores la opción de buscar en nuestro blog, en Google, en Blogger y en Technorati.

Nos lo regala PurpleMoggy y es una bendición para tu blog. Es perfectamente personalizable; yo he variado un mínimo el CSS original porque me enamoró su sencillez, pero puedes modificar los valores para adaptarlo a tu blog como más te guste.

* Añade esto en un elemento HTML/javascript:

  <div id="pm-search">
   <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><li id="li-b" class="pm-search-unselected" onclick="selectB()">Blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">Technorati</li>
   </ul>
   <div id="pm-search-h">
   <form action="http://TUBLOG.blogspot.com/search" method="get">
   <input id="pm-f-h" value="" name="q" size="15" type="text"/>
   <input value="Buscar" type="submit"/>
   </form>
   </div>
   <div id="pm-search-g">
   <form action="http://blogsearch.google.com/blogsearch" method="get">
   <input id="pm-f-g" value="" name="as_q" size="15" type="text"/>
   <input value="Buscar" type="submit"/>
   <input value="TUBLOG.blogspot.com" name="bl_url" type="hidden"/>
   </form>
   </div>
   <div id="pm-search-b">
   <form action="http://search.blogger.com/" method="get">
   <input id="pm-f-b" value="" name="as_q" size="15" type="text"/>
   <input value="Buscar" type="submit"/>
   <input value="TUBLOG.blogspot.com" name="bl_url" type="hidden"/>
   </form>
   </div>
   <div id="pm-search-t">
   <form action="http://www.technorati.com/search.php" method="post">
   <input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/>
   <input value="Buscar" type="submit"/>
   <input value="searchlet" name="sub" type="hidden"/>
   <input value="TUBLOG.blogspot.com" name="from" type="hidden"/>
   <input value="n" name="authority" type="hidden"/>
   <input value="n" name="language" type="hidden"/>
   </form>
   </div>
   </div>

¡Asegúrate de poner aquí correctamente la URL de tu blog!


* Ahora vamos a la edición HTML de la plantilla. Busca ]]</b:skin> y añade antes:

  /** css for the search box */
   div#pm-search ul { /* unordered list */
   margin-top: 0;
   margin-right: 0;
   margin-left: 0px;
   margin-bottom: 5px;
   padding: 0;
   }
   div#pm-search li { /* cada elemento de la lista */
   list-style-type: none; /* no editar */
   display: inline; /* no editar */
   cursor: pointer; /* no editar */
   margin-top: 0;
   margin-bottom: 0;
   margin-right: 5px;
   margin-left: 0px;
   text-indent: 0px;
   padding: 0;
   }
   div#pm-search form { /* formulario de busqueda */
   margin: 0;
   padding: 0;
   }
   div#pm-search-h {
   display: block; /*no editar */
   }
   div#pm-search-g,
   div#pm-search-b,
   div#pm-search-t {
   display: none; /* no editar */
   }
   div#pm-search input { /* caja de texto y boton submit */
   background-color: transparent;
   border: 1px dotted #999;
   color: #999;
   }
   .pm-search-selected { /* servicio de busqueda seleccionado */
   color: #999;
   border-bottom: 1px dotted #999;
   }
   .pm-search-unselected { /* servicios de busqueda no seleccionados */
   color: #777;
   border-bottom: 1px dotted #777;
   }

Aquí puedes modificar colores y bordes, y hacer otros ajustes.


* Por último, añade esto justo después de ]]</b:skin>:

  <script type='text/javascript'>
   //<![CDATA[

   /***********************************************
   * Javascript functions for the search box
   * made by PurpleMoggy :)
   * http://purplemoggy.blogspot.com/
   ***********************************************/
   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('li-b').className = 'pm-search-unselected';
   document.getElementById('li-t').className = 'pm-search-unselected';
   document.getElementById('pm-search-h').style.display = 'block';
   document.getElementById('pm-search-g').style.display = 'none';
   document.getElementById('pm-search-b').style.display = 'none';
   document.getElementById('pm-search-t').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('li-b').className = 'pm-search-unselected';
   document.getElementById('li-t').className = 'pm-search-unselected';
   document.getElementById('pm-search-h').style.display = 'none';
   document.getElementById('pm-search-g').style.display = 'block';
   document.getElementById('pm-search-b').style.display = 'none';
   document.getElementById('pm-search-t').style.display = 'none';
   document.getElementById('pm-f-g').value = document.getElementById(search_which_one).value;
   search_which_one = "pm-f-g";
   }
   function selectB() {
   document.getElementById('li-h').className = 'pm-search-unselected';
   document.getElementById('li-g').className = 'pm-search-unselected';
   document.getElementById('li-b').className = 'pm-search-selected';
   document.getElementById('li-t').className = 'pm-search-unselected';
   document.getElementById('pm-search-h').style.display = 'none';
   document.getElementById('pm-search-g').style.display = 'none';
   document.getElementById('pm-search-b').style.display = 'block';
   document.getElementById('pm-search-t').style.display = 'none';
   document.getElementById('pm-f-b').value = document.getElementById(search_which_one).value;
   search_which_one = "pm-f-b";
   }
   function selectT() {
   document.getElementById('li-h').className = 'pm-search-unselected';
   document.getElementById('li-g').className = 'pm-search-unselected';
   document.getElementById('li-b').className = 'pm-search-unselected';
   document.getElementById('li-t').className = 'pm-search-selected';
   document.getElementById('pm-search-h').style.display = 'none';
   document.getElementById('pm-search-g').style.display = 'none';
   document.getElementById('pm-search-b').style.display = 'none';
   document.getElementById('pm-search-t').style.display = 'block';
   document.getElementById('pm-f-t').value = document.getElementById(search_which_one).value;
   search_which_one = "pm-f-t";
   }

   //]]>
   </script>

Guarda los cambios.



¡Asegúrate de colocarlo en un lugar bien visible!