Ya he visto cómo se pueden añadir nuevos widgets a la cabecera del blog, que por defecto está limitado solo al widget Cabecera de página.
Una vez que esté habilitada la opción "Añadir un gadget" ya podemos añadir el widget Buscador.
Añadir el widget Buscador en la cabecera del blog
Hacemos clic sobre "Añadir un gadget"
y seleccionamos el widget de Buscador.
Como
podemos ver en el menú Diseño, ahora el widget "Buscar este blog" está situado
sobre el widget de "Cabecera de página" y ha desaparecido la opción de
añadir un nuevo gadget porque solo hemos establecido en el código HTML de la plantilla un máximo de 2 widgets para la cabecera "header".
<b:section class='header' id='header' maxwidgets='2' name='Header' showaddelement='yes'>
Guardamos la disposición de la plantilla y vemos que el blog ahora incorpora el buscador sobre la cabecera del blog.
Si consultamos el código HTML de la plantilla vemos que se ha añadido una nueva línea a las descritas anteriormente y que corresponde al widget BlogSearch1 (Buscar en el blog).
<b:section class='header' id='header' maxwidgets='2' name='Header' showaddelement='yes'>
<b:widget id='BlogSearch1' locked='false' title='Buscar este blog' type='BlogSearch' visible='true'>...</b:widget>
<b:widget id='Header1' locked='true' title='TITULO DEL BLOG (cabecera)' type='Header' visible='true'>...</b:widget>
</b:section>
Incluir el buscador sin modificar el diseño de la plantilla.
Podemos añadir el buscador sin necesidad de modificar la plantilla en el menú Diseño.
Ahora lo vamos a hacer solamente modificando el código HTML de la plantilla después de hacer una copia de seguridad.
Añadimos tras la etiqueta </b:section> el siguiente código resaltado en negrilla,
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITULO DEL BLOG (cabecera)' type='Header' visible='true'>...</b:widget>
</b:section>
<div>
<form action='/search' id='searchaction' method='get' style='display:inline;'>
<input id='boxsearch' name='box' type='text'/> <input id='searchbotton' type='submit' value='Buscar'/>
</form>
</div>
Con la etiqueta <div> definimos una sección dentro del documento que nos permite agrupar un bloque de elementos al que podremos añadirle un estilo determinado.
La etiqueta <form> define y controla los elementos de un formulario, que en este caso es el cuadro de búsqueda donde se ingresarán datos.
Se añade a esta etiqueta el atributo action <form action=/search' que es la URL que procesará los datos.
Por último, con el atributo id asignamos un identificador para tres elementos.
- id='searchaction' donde identificamos el cuadro de búsqueda.
- id='searchbotton' que se asigna al botón Buscar.
- id='boxsearch' para el cuadro de ingreso de datos.
Guardamos los cambios en la plantilla y comprobamos que el buscador del blog está dentro de la cabecera.
Personalizar el cuadro de búsqueda dentro de la cabecera del blog
Podemos personalizar el cuadro de búsqueda, para eso tenemos que añadir código CSS a la plantilla y usar los id que hemos creado colocando la almohadilla "#" antes de su valor.
En
este ejemplo el cuadro de búsqueda se mostrará en la zona superior
derecha de la cabecera del blog, con efecto hover sobre el botón de
búsqueda.
El efecto hover se produce cuando el aspecto de un elemento de la interfaz gráfica cambia al situar el puntero del ratón sobre el mismo pero no se ha seleccionado aún.
Vamos a Plantilla → Editar HTML.
Dentro de la ventana que se abre con el código, activamos el buscador con CTRL+F y buscamos </b:skin>.
Justo
encima de esa línea insertamos el código CSS que se indica a continuación, para dar estilo al buscador
del blog que hemos incluido dentro de la cabecera.
/*Buscador ------------*/
#searchaction{
position: absolute;
top:30px;
left:680px;
}
#searchbotton {
background-color:#ffffff;
color:#663300;
margin:0;
font:bold 16px Tahoma;
border:2;
float: left;
}
#searchbotton:hover {
cursor:pointer;
background-color:#663300;
color:#ffffff
}
#boxsearch {
color:#CC6600;
margin:0;
font:16px Verdana;
border: 2px solid #CC6633;
width:150px;
}
]]></b:skin>
#searchaction{
position: absolute;
top:30px;
left:680px;
}
#searchbotton {
background-color:#ffffff;
color:#663300;
margin:0;
font:bold 16px Tahoma;
border:2;
float: left;
}
#searchbotton:hover {
cursor:pointer;
background-color:#663300;
color:#ffffff
}
#boxsearch {
color:#CC6600;
margin:0;
font:16px Verdana;
border: 2px solid #CC6633;
width:150px;
}
]]></b:skin>
Hemos aplicado estilo a cada uno de los atributos id definidos previamente.
Guardamos estos cambios y vemos el blog.
El resultado es el que se muestra a continuación,
