Reactivar el Cuadro de búsqueda de Blogger: Usando otro cuadro de Búsqueda

Me he pasado 15 horas intentando hacer funcionar el buscador de blogger y al final pude lograrlo, reemplazándolo con un script del mismo API, pues el de Blogger está dañado, pero con mis limitaciones de Ajax y Javascript nos centraremos únicamente en hacerlo funcionar con todo ya configurado, aunque si pueden ver mi buscador, quedó perfectamente.

Resultado final

¿Pero por qué no funciona el buscador de Blogger?
Simple, alguien del personal de blogger modificó el valor searcher.setSiteRestriction("sitio.blogspot.com"); por un valor que al imprimir el resultado en el navegador no hace la búsqueda, debido a que searcher.setSiteRestriction determina que lugar podemos buscar y si notan bien, el buscador de blogger muestra correctamente las otras pestañas de búsquedas.

Pese a que podría decirles todas las modificaciones necesarias para el diseño solamente nos centraremos en hacerlo funcionar.

Sea como fuera, debo advertir que este script causa problemas al salvar la plantilla, pues los obligará a abandonar la página, aunque molesto, solamente tendrán que regresar a la misma página con el botón de retroceso de su navegador.

El Script que hace el efecto se instala antes de la etiqueta </head>, una variante del de AJAX APIs Blog:

<script src='https://www.google.com/jsapi' type='text/javascript'></script>
<script language='Javascript' type='text/javascript'>
//<![CDATA[
    // Carga API de busqueda y feed
    google.load("search", "1");
    google.load("feeds", "1");
    function OnLoad() {
      var controlRoot = document.getElementById("searchResults");
      // Create a search control
      var searchControl = new GSearchControl();
      searchControl.setLinkTarget(GSearch.LINK_TARGET_SELF);
      searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
      var searchFormElement = document.getElementById("searchcontrol");
      var drawOptions = new GdrawOptions();
      drawOptions.setSearchFormRoot(searchFormElement);
      drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

        // Este blog
      var searcher = new GwebSearch();
      searcher.setSiteRestriction("http://tuweb.blogspot.com");
      searcher.setUserDefinedLabel("Pulsa en la X al lado del cuadro de búsqueda para cerrarme");
      searchControl.addSearcher(searcher);
      // Impresion
      searchControl.draw(controlRoot, drawOptions);
      var options = {
            linkTarget : google.feeds.LINK_TARGET_SELF,
            semanticMarkup : true,
            headerTitle : "Paterbar Nombre",
            numEntries : 3,
            randomSelectionCount : 8,
            autoRefresh : true,
            cycleTime : 30000
          }
      new PartnerBar("partnerBar", googleBlogs, options);
    }

    var spad_loaded = false;
    function toggleSPad() {
      var container = document.getElementById("spad-container");
      var link = document.getElementById("spad-link");
      if (container.style.display != "block") {
        if (!spad_loaded) {
          container.innerHTML = [
            '<div style="background:#000;clear:both;text-align:right;">[<a onclick="toggleSPad();" href="javascript:void(0);">close</a>]</div>',
            '<iframe style="width:100%; height:435px;" frameborder="0" scrolling="no" src="http://gmodules.com/ig/ifr?url=spad.xml&amp;synd=open&amp;output=html"></iframe>'
          ].join("");
          spad_loaded = true;
        }
        container.style.display = "block";
      } else {
        container.style.display = "none";
      }
    }
  google.setOnLoadCallback(OnLoad, true);
//]]>
</script> 

*Cambien la dirección en negro por la dirección de su propio blog.

Cuadro de búsqueda
Para insertar el cuadro de búsqueda lo ideal sería insertarlo en un artilugio que usted no vaya a borrar, por ejemplo en un sidebar o barra lateral, pero como para la mayoría esto puede ser muy complicado mi idea es simple, sin expandir la plantilla busque la sección donde desea insertar el por ejemplo entre
<div id='side-wrapper2'> ... <b:section class='sidebar' id='sidebar2' preferred='yes'>, generalmente las secciones se envuelven entre DIV con ID del tipo nombre-wrapper.

Para el caso del ejemplo pegamos despues de <div id='side-wrapper2'>:

<div id='searchc-containter'>
<h2>Buscar</h2>
<div id='searchcontrol'/></div>

Quedando como

<div id='side-wrapper2'>
<div id='searchc-containter'>
<h2>Buscar</h2>
<div id='searchcontrol'/></div>
<b:section class='sidebar' id='sidebar2' preferred='yes'>

Agregamos el estilo a la sección de CSS

/* interceptar diseño de google ajax estilo 1.2 por matius */
input.gsc-search-button:hover {background:#A80000;}
td.gsc-search-button {padding:0 0 0 10px !important;}
table.gsc-search-box
{
width:224px !important;
margin:0 auto 0 auto;}
input.gsc-search-button
{margin:0 !important;
padding:5px;
color: #fff;
background: #000;
border: 2px solid #fff !important;
}
input.gsc-input {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNHjEEjR5poiLEKOz0jq6MgfmqoJ7C5mFCig5apmrtmtnzs2n5XzL5mZT-r8w3GYVfrDr51J2nDxs_upOJulC_tzRGIh7KzA0eWlnEMzLvS269QJU_Fewa1JHLPRfxNaCtGRQkew/) 3px 3px no-repeat;
padding: 5px 5px 5px 35px !important;
width:150px !important;
color: #000;
border: 2px solid #000 !important;
}
.gsc-branding-text, .gsc-branding-img-noclear, img.gsc-branding-img
{
display:none !important;
}
#spad-container {
margin-bottom: 10px;
border-bottom: 2px dotted #676767;
display: none;
}
#searchcontrol {width:256px;margin:0 auto 0 auto;}
#searchc-containter {
margin: 0 0 10px 0;
padding:15px;
border: 0px solid #000000;
background:$sidebar1bgColor url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOoqlHSY1Cig_G1wpl0y3a3m1nPHibEl8s3L1-0FnhOoSMy_n2J26ZtrYP0QuEneFYcjnDr9Gw_HNSgVzakyol8qYFN0U34iqQiNpl7iOCccW44Y-lvB4NXjEy6Y68dgfpJmFIhg/") right bottom repeat-x;
}
#searchc-containter h2 {clear:both;
margin: -15px -15px 10px -15px;
padding: 5px 15px;
text-align: left;
color:#fff;
font-family: verdana, sans-serif;
font-size: 10px;
text-transform: uppercase;
background:#656566 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-6z5yE_YSsPj5lkRQ25z6mrAKKuvUgdAwuseoqqAG8oAlVBkDmSJ87R5bjU3p9cESTeEHhfbVWRGasCsIZGC1IVp6zsXEogtrJ_dnD2mrvYorceSW9Zfy8_JDFOF6_g49d905Tw/) top right no-repeat;
}
#searchResults {font-family: 'palatino linotype', palatino, serif;
font-size: 12px;
background:#fff;
padding:0;
margin:0 20px;
}
#searchResults .gsc-control {
width : 100%;
}
#searchResults .gsc-resultsbox-visible {
border: 1px solid #656565;
padding:0 20px 20px;
margin-bottom:20px;
}

Resultados de búsqueda
Para lo resultados de las búsquedas debemos Expandir la plantilla de artilugios y buscar <b:includable id='post' var='post'> y justo después, pegar:

<div id='searchResults'/>

Eso es todo.

Conclusiones
No he podido resolver el problema de la X para el cierre de la búsqueda, que aparece en el cuadro de búsqueda y no en los resultados, pese a que lo intenté de muchas formas, simplemente se esconde. si algún usuario sabe como resolver este problema, se agradecería cualquier ayuda.

El problema de el cuadro de Edición HTML que nos obliga a abandonar la página, no puedo resolverlo, no sé porque sucede, solamente pulsen en Abandonar esta página y al salir a una página en blanco solamente pulse el boton de retorno de su navegador. -Si sabes como resolverlo, contáctame-

He tenido que poner un mensaje que dice Amigos: Pulsen en la X a la lado del cuadro de búsqueda para cerrar, para que se den cuenta donde deben pulsar para cerrar los resultados.

Gracias a Google Code por hacernos la vida tan complicada, con su ejemplos tan "aclaradoradoramente" sencillos, para no servir de nada.