viernes, 25 de noviembre de 2011

Oloblogger

Oloblogger


Situar el gadget buscador junto al título del blog (o en otro sitio cualquiera)

Posted: 24 Nov 2011 08:00 AM PST

Parece que un buen lugar y que agrada a la mayoría para poner su buscador interno, es en la parte superior del blog, más o menos a la altura del título, dentro de la cabecera. Cómo se puede colocar ahí es lo que vamos a ver en esta entrada, aunque lo cierto es que con el mismo sistema podremos ponerlo dónde nos plazca.

Las modificaciones las he hecho desde el nuevo escritorio (nueva interfaz), así que las referencias van literales como aparecen en él. Para el clásico es más o menos lo mismo pero lo comento para evitar confusiones.


Lo primero que haremos será acceder a Plantilla ► Edición HTML para modificar la sección que corresponde a la cabecera de manera que nos admita varios widgets. Por defecto esta parte del blog viene con unos parámetros que limitan el número de artilugios que puede contener y que por otra parte, bloquea la posibilidad de añadir alguno. Respectivamente son maxwidgets y showaddelement y así es como viene si no se han modificado:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Puede que en vuestra plantilla la parte superior no tenga la misma nomenclatura (header), pero si buscáis sin expandir artilugios, lo normal es que sea la primera sección que aparezca.

Cabecera original

Los parámetros que antes hemos comentado se tienen que cambiar de la siguiente manera:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Con un 2 en maxwidgets ya nos vale para este caso (cabecera+buscador), pero si necesitáis poner más cosas por ahí arriba, podéis aumentar ese número en cualquier momento. Con respecto a showaddelement, el valor para poder añadir elementos es precisamente yes.

Ahora si vamos a Diseño, podremos ver que en la parte de la cabecera aparece un nuevo recuadro encima del elemento cabecera que nos permitirá Añadir un gadget.

Nuevo bloque para añadir gadgets en la zona de la cabecera
Ahora llega el momento de añadir el buscador. Pinchamos en Añadir un gadget, seleccionamos el que se llama Cuadro de búsqueda, marcamos las opciones que nos interesen y guardamos. Ahora lo que veremos en nuestro blog será algo similar a esto:

Cabecera con buscador encima
Ya sólo nos resta dar las propiedades adecuadas para que la caja del buscador no ocupe todo el ancho y que además se ubique a la derecha del título. Eso lo hacemos accediendo a Diseño ► Diseñador de Plantillas ► Avanzado ► Añadir CSS. Allí tecleamos o copiamos esto:

#CustomSearch1 {
float:right;
position:relative;
top:16px;
right:0px;
width:200px;
height:33px;
padding-left:36px;
background:url(http://1.bp.blogspot.com/_0eC4K-qZ7AM/Sr1bJb_EBCI/AAAAAAAAJ4w/qzUSCige6gk/s400/lupa.gif) no-repeat 0px 0px;
}

Con TOP y RIGHT podéis cambiar la ubicación exacta del buscador. El ancho (WIDTH) y el alto (HEIGHT) también los podéis modificar a vuestro gusto. Las dos últimas líneas (PADDING y BACKGROUND) son un plus que se me ha ocurrido haciendo estas pruebas y que sirven para poner un icono a la izquierda de la caja del buscador. Podéis cambiar el dibujito o directamente anularlo del código borrando esas dos líneas.

Cabecera con buscador alineado


No hay comentarios:

Publicar un comentario

Correo Vaishnava