Buscador de google personalizado

Aunque más adelante explicaré paso por paso cómo editar por completo el buscador de google que nos ofrece blogger, hoy te dejo con el código de un buscador que yo edité hace unos días.

El buscador de google, y, especialmente este, tiene una particularidad muy especial: mostrar los resultados en un recuadro, encima de las entradas.

Esto lo convierte en un buscador muy cómodo y bastante útil.

En el buscador original, el recuadro de los resultados aparece así:

Y haciendo este truco lo dejarás así:

¿Te gusta el resultado? Si es así, empecemos...

Diseño>edición HTML>expandimos artilugios

Busca la siguiente línea:

<div id='sidebar-wrapper'>

Y un poco más abajo encontrarás esta otra:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Ahora, justo debajo de esa línea pega este código:

<b:widget id='CustomSearch1' locked='false' title='' 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' style='width:99%'>
<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,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
text-decoration: none;
color:#969696;
}


#uds-searchControl .gs-result .gs-title *{
background: #ffffff url() no-repeat left;
color: #6fb0dc;
text-decoration: none;
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color: #6fb0dc;
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
visibility: hidden;
display: none;
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
visibility: hidden;
display: none;
}

#uds-searchControl .gsc-results {
border: 3px double #dedede;
}

#uds-searchControl .gsc-tabhActive {
visibility: hidden;
display: none;
}

#uds-searchControl .gsc-tabhInactive {
border-color: #dedede;
background-color: transparent;
color: <data:linkColor/>;
}

#uds-searchClearResults {
border-color: #dedede;
margin-right: 12px;
}

#uds-searchClearResults:hover {
border-color: #3d5dc2;
}

#uds-searchControl .gsc-cursor-page {
color: #6678b2;
}

#uds-searchControl .gsc-cursor-current-page {
color: #488a28;
}
</style>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Cuando lo hayas añadido guarda cambios.

En Diseño>Elementos de la página podrás mover el buscador al lugar que quieras, como cualquier otro gadget.


Para terminar, haz clic en editar, en el gadget del buscador y selecciona únicamente la pestaña que dice "Este blog" (que aparece debajo del título del gadget).



Guarda cambios y listo. ☺