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 aPlantilla ► 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 sonmaxwidgets yshowaddelement 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 sinexpandir 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 enmaxwidgets 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 ashowaddelement, el valor para poder añadir elementos es precisamenteyes.Ahora si vamos aDiseñ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 enAñ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 aDiseñ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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNK0Nd4XR8zxN4hKIntZDub2r-kddHjy9gQ0Du3NsgSlVp0gs2HdUogVASMww-g0KA30aelHySScVFBBidygf2YBCi22rfS4n-MwCPpVcYaULtoMLIan3IVh2mwhdTd9bOY37efG2v88bK/s400/lupa.gif) no-repeat 0px 0px;}
ConTOP yRIGHT 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 yBACKGROUND) son un plus que se me ha ocurrido haciendo estas pruebas y que sirven para ponerun 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 |
Actualización: Cuando la caja del buscador no permita escribir texto en ella, añadir una propiedad más a #CustomSearch1. En concreto, z-index:1000; o cualquier otro número grande. Eso hace que la caja quede por encima del resto de capas, ya que la causa de que esto ocurra es que se queda por debajo en algunas plantillas.
