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(http://lh3.ggpht.com/_NNS6r_z4aeg/St_LEuQJSCI/AAAAAAAANzI/XV4G0A5MqUo/lupa.jpg) 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("http://lh6.ggpht.com/_NNS6r_z4aeg/Sbww274-AQI/AAAAAAAAJRg/mE9FYm6an1I/minicuadro.jpg") 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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

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.

    ResponderEliminar
  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.

    ResponderEliminar

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com