» » » Buscador nativo de Blogger personalizado

Buscador nativo de Blogger personalizado




Un poco de teoría: el buscador nativo o genérico del blog de Blogger

Las características gráficas son genéricas y se cargan desde una hoja de estilo externa (gsearch.css). Para que se adapte a nuestro sitio, Blogger sobrescribe algunas propiedades y por eso lo hace allí, justo después de cargar el gadget.

  • En el HTML de nuestra plantilla de Blogger
Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►pegamos CustomSearch, o vamos directamente al Widgets
Lo visualizamos así


Internamente el Gadgets o Widgets nos mostrara el siguiente código

  <b:widget id='CustomSearch1' locked='false' title='Buscar en este blog' type='CustomSearch'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
        <span class='cse-status'><data:loadingMsg/></span>
      </div>
    </div>
    <!-- override gsearch.css -->
    <style type='text/css'>
      #uds-searchControl .gs-result .gs-title,
      #uds-searchControl .gs-result .gs-title *,
      #uds-searchControl .gsc-results .gsc-trailing-more-results,
      #uds-searchControl .gsc-results .gsc-trailing-more-results * {
        color:<data:linkColor/>;
      }
      #uds-searchControl .gs-result .gs-title a:visited,
      #uds-searchControl .gs-result .gs-title a:visited * {
        color:<data:visitedLinkColor/>;
      }
      #uds-searchControl .gs-relativePublishedDate,
      #uds-searchControl .gs-publishedDate {
        color: <data:dateColor/>;
      }
      #uds-searchControl .gs-result a.gs-visibleUrl,
      #uds-searchControl .gs-result .gs-visibleUrl {
        color: <data:urlColor/>;
      }
      #uds-searchControl .gsc-results {
        border-color: <data:borderColor/>;
        background-color: <data:backgroundColor/>;
      }
      #uds-searchControl .gsc-tabhActive {
        border-color: <data:borderColor/>;
        border-top-color: <data:activeBorderColor/>;
        background-color: <data:backgroundColor/>;
        color: <data:textColor/>;
      }
      #uds-searchControl .gsc-tabhInactive {
        border-color: <data:borderColor/>;
        background-color: transparent;
        color: <data:linkColor/>;
      }
      #uds-searchClearResults {
        border-color: <data:borderColor/>;
      }
      #uds-searchClearResults:hover {
        border-color: <data:activeBorderColor/>;
      }
      #uds-searchControl .gsc-cursor-page {
        color: <data:linkColor/>;
      }
      #uds-searchControl .gsc-cursor-current-page {
        color: <data:textColor/>;
      }
    </style>
    <b:include name='quickedit'/>
  </b:includable>
  </b:widget>

► Por defecto, sólo cambia algunos datos para igualar los colores de nuestra plantilla pero, nada impide agregar o modificar más definiciones.


Empecemos con el cuadro del buscador que es el más sencillo. Hay cuatro definiciones importantes:

input.gsc-input {
/* es el cuadro donde se ingresa el texto a buscar */
}
input.gsc-search-button {
/* es el botón "Buscar" */
}
.gsc-branding-text {
/* es el texto inferior "con la tecnología de" */
}
.gsc-branding-img-noclear {
/* es la imagen con el logo de Google*/
}

Personalizarlo

Pasos




  1. Agregar el Gadget
  2. Configurarlo
  3. Ir a Diseñador de plantillas ► Avanzado ► Añadir CSS ►Añadir código CSS personalizado


Copiar una de los siguientes códigos:

/*---CustomSearch ----*/
.gsc-results{
margin: 10px 10px;
background:#FED9BF !important;
 }
#input.gsc-input{
margin: 10px 10px;
background: #eee;
}
.gsc-branding-text, .gsc-branding-img-noclear {
display:none;
}
input.gsc-search-button {
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
font-family:'trebuchet ms';
font-size:15px;
padding: 6px 6px;
color:#ffffff;
background:#808080;
border: 10px ;
font-weight:bold;
}
div#CustomSearch1.widget.CustomSearch{
background: #00c0c0;
padding: 4px 4px;
margin: -20px 0 0 0;
}
div#CustomSearch1_form{
background: #000;
padding: 10px 10px;
-moz-border-radius:2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
border-radius:2px 2px 2px 2px;
}

El diseño quedaría de esta manera




/*---CustomSearch2 ----*/
#input.gsc-input{
margin: 10px 10px;
background: #eee;
}
.gsc-branding-text, .gsc-branding-img-noclear {
display:none;
}
input.gsc-search-button {
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
font-family:'trebuchet ms';
font-size:18px; padding: 6px 6px;
color:#fff;
background:$(link.color);
border:0px;
font-weight:bold;
}
input.gsc-search-button:hover {
background: $(link.hover.color);
color:#fff;
}
input .gsc-input{
background: #cc0000;
}
div#CustomSearch1.widget.CustomSearch{
background: $(link.color);
padding: 4px 4px;
margin: -20px 0 0 0;
}
div#CustomSearch1_form{
background: #eee;
padding: 8px 8px;
-moz-border-radius:2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
border-radius:5px 5px 5px 5px;
}

Con este otro código Css el buscador de Blogger quedaría


Cuando ayas elegido tu diseño personalizado del buscador nativo o por defecto de Blogger dale Aplicar al blog.


Si te gusta la entrada compártela.

¡Gracias!

2 comentarios:

▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top