Buscador de Google en tu blog. Personalizar "Cuadro de Búsqueda"

Añadir colores, modificar tamaño y propiedades del texto son unas de las opciones que hay si optas por colocar en tu blog el Buscador que proporciona Blogger como gadget "Cuadro de Búsqueda".

En una entrada anterior expliqué de forma sencilla como eliminar la publicidad de Google en el buscador.

Siguiendo con esa entrada añado nuevos elementos para personalizarlo, hacer que haga juego con la decoración del blog y contestar a LadyMarian.


0. Guardar siempre plantilla. ¡¡¡Nunca aventurarse a cambiar elementos sin una copia previa!!!!!

1. Escritorio - Diseño - Elementos de página - Añadir un gadget y lo seleccionamos:

2. Decidimos donde cada cual quiere buscar la información:



3. Ya añadido el gadget a nuestra plantilla queda algo similar a:



4. Ir a Diseno - Edición HTML - Tildar "Expandir plantillas de Artilugios"



5. Apretamos a la vez las teclas Ctrl+F y buscamos el código:
6. Una vez encontrado, ( ¡¡¡¡ojo!!!!!! se coloca ANTES), debemos copiar el siguiente código:

a) Si sólo quieres eliminar la frase ”con la tecnología de Google” coloca sólo


.gsc-branding-text, .gsc-branding-img-noclear {

display:none;

}


b) Si además quieres cambiar las propiedades del botón "Buscar", añade al código anterior lo siguiente:


input.gsc-search-button {

color: #FFF;



border: 1px solid #ff0084;

}


* Aquí varias el color, el fondo y el borde del botón.

* También es posible modificar las propiedades del texto añadiendo nuevos códigos (pej: font-weight:bold; font-size: 13px. Colocar una imagen de fondo (background: url [aquí-tu-imagen] no-repeat), añandiendo otros atributos como “height” y “width” (un botón debe tener aproximadamente 60×20 píxeles).

* Para hacer más ancho el botón se puede añadir las opciones "padding" tal y como se muestra en el ejemplo:


input.gsc-search-button {

padding-top:10px;

padding-bottom: 10px;

}


c) Si quieres transformar la caja del buscador se añade:


input.gsc-input {

color: #ff0084;

}


* Aquí puedes cambiar el color del texto, y también el fondo, pero no el borde.

* Si deseas agrandar el ancho del buscador el código sería:


input.gsc-input {

padding-top:7px;

padding-bottom: 7px;

}


Ejemplo: Mi buscador, situado en la columna de la derecha, tiene el siguiente código...


.gsc-branding-text {

display:none;

}

.gsc-branding-img-noclear {

display:none;

}





input.gsc-search-button {

color: #B40404;

font-weight:bold;

font-size: 13px;

border:2px ridge #8A0808;

padding-top: 1px;

padding-bottom: 1px;

}





input.gsc-input {

padding-top: 7px;

padding-bottom: 7px;

color: #000000;

font-size: 17px;

font-weight:bold;

background: #F35D5D;

}



■ Web donde consultar el cuadro de colores para los fondos y bordes de tu buscador.

Recordar que en este truco, (y siempre), se pueden hacer tantas "Vistas Previas" como se deseen mientras decidimos colores, tamaño...
Una vez dado con aquello que nos guste sólo restará "Guardar plantilla".

Fuente: Claudia


(Un apunte personal más para no olvidar)

********Ampliación para modificar el buscador:

- Este blog: es el buscador interno
- Acceso desde aquí: busca en las entradas visibles, enlaces dentro de esas entradas, - listas de sitios o listas de enlaces
- Internet: es un buscador genérico
- Listas de blogs y enlaces: agrega la posibilidad de buscar en todos los sitios agregados al blogroll

Una vez que definimos esto, lo agregamos y lo ubicamos donde queremos que se muestre.

Por defecto, leerá los datos de nuestra plantilla y se adaptará a las características gráficas de nuestro sitio. Veremos el cuadro de búsqueda y nada más. De manera automática, se añadirá un DIV oculto sobre el área de posts que es donde se mostrarán los resultados:


<div id="uds-searchControl">

.......

</div>


Si vamos a la plantilla y expandimos los artilugios veremos el código comenzando con algo así:

<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'>

<b:includable id='main'>

<!-- el título igual que cualquier otro widget -->

.......

<!-- el código en si mismo -->

<div class='widget-content' style='width:95%'>

<div expr:id='data:widget.instanceId + "_form"'>

<span class='cse-status'><data:loadingMsg/></span>

</div>

</div>



<!-- y aquí comienza lo interesante -->

<!-- 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>



<!-- el ícono para editar el elemento -->

<b:include name='quickedit'/>

</b:includable>

</b:widget>


En esa parte de STYLE, Blogger dice "override gsearch.css" y eso es lo importante y lo que lo hace distinto a tantos otros gadgets. 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.

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

- Lo más sencillo se explicó al inicio y era:


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*/

}


- Configurar el cuadro de resultados:

El bloque total, el rectángulo oculto donde se muestran los resultados del buscador se llama uds-searchControl así que podemos usarlo si es necesario modificar su ancho y sus márgenes:


#uds-searchControl { }


En la parte superior se muestran las solapas con las opciones que hayamos seleccionado y ese rectángulo podemos modificarlo mediante:

#uds-searchControl .gsc-tabsArea { }


Las solapas. Hay de dos tipos y en ambas podríamos establecer bordes, color y fuente de los textos, colores de fondo,...


#uds-searchControl .gsc-tabhInactive { /* son las solapas inactivas */ }

#uds-searchControl .gsc-tabhActive { /* es la solapa activa */ }


A la derecha de estas se muestra un botón que permite volver a ocultar los resultados y tiene dos definiciones:


#uds-searchClearResults { }

div.gsc-clear-button { }




Todo lo demás se encuentra dentro de un rectángulo que tiene un borde visible y un padding que separa el contenido de esos bordes:

#uds-searchControl .gsc-results { }


Los resultados en si mismos tienen cuatro definiciones a las que podemos agregarles fondos, cambiar colores y fuentes...:


#uds-searchControl .gs-result .gs-title,

#uds-searchControl .gs-result .gs-title *,

#uds-searchControl .gs-result .gs-title a:visited,

#uds-searchControl .gs-result .gs-title a:visited * { /* es el título de cada una */}



#uds-searchControl .gs-relativePublishedDate, #uds-searchControl .gs-publishedDate { /* es la fecha */}



#uds-searchControl .gs-result a.gs-visibleUrl, #uds-searchControl .gs-result .gs-visibleUrl { /* es enlace inferior */}



#uds-searchControl .gs-result .gs-snippet { /* es el resumen de las entradas encontradas */}


En esta última, se resalatan las palabras buscadas, eso se hace con una etiqueta B así que podríamos agregar algo así si quisiéramos que resaltarán de otro modo:


#uds-searchControl .gs-result .gs-snippet b { }




En la parte inferior, lo que veremos es un área de paginación llamada:


.gsc-results .gsc-cursor-box { }


En ese área, las páginas se muestran como enlaces numerados definidos por:

#uds-searchControl .gsc-results .gsc-cursor-box .gsc-cursor-page { }


y la página actual está resaltada:


#uds-searchControl .gsc-results .gsc-cursor-box .gsc-cursor-current-page { }


a la derecha, el enlace "más resultados" nos abrirá el buscador de normal:


#uds-searchControl .gsc-results .gsc-cursor-box .gsc-trailing-more-results { }





Fuente directa:VG

► Buscador interno simple:


<div align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form></div>


Diseño ~> Elementos de la página ~> Añadir Gadget ~> HTML/JavaScript y pegar el siguiente código:

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" value="" type="text" id="searchBox" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q" /> <input id="searchButton" value="Buscar" type="submit" /></form>

Donde 150 es la anchura de la barra de búsqueda que se puede modificar así como el color.

► Supongamos que el buscador no aparece, en su lugar aparece "Cargando..." :

Motivos:
1. Fallo en la plantilla de algún elemento fundamental.
2. Se borra algo mientras cambiamos la plantilla.
Aclarar que Blogger añade códigos, líneas a su libre albedrío.

Si no existe la línea y el buscador no carga la solución es insertarla después de <head>


<b:include data='blog' name='all-head-content'/>


Se acabó.