sábado, 4 de junio de 2011

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://lh4.googleusercontent.com/-CJ-AZv19X2g/TelT_hw8uoI/AAAAAAAAU-c/F1JZkTxka4g/toph2gray.png) 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.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

2 comentarios:

  1. Ni me había dado cuenta de que no funcionaba el cuadro de búsqueda. De todas formas, tengo el otro que incluye adsense. Saludos.

    ResponderBorrar
  2. Si quieres obtener ingresos es lo ideal, aunque es algo feo como todo lo diseñado por Google y si le quitas los logos puedes ser penalizado por Adsense.

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.