Revista Creaciones

Añadir y personalizar un buscador en blogger

Por Perlinaprieta @perlinaprieta
Añadir un buscador
Añadir un buscador en el blog es muy fácil, solo hay que añadir un código en un gadget. Es muy sencillo,  más simple no puede ser.
Solo tienes que copiar este código:
<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="20" style="height:20px;" type="text" /> <input id="search-btn" type="submit" value="Buscar" /></form>
- ir a  Diseño > añadir un gadget > html/javascript > editar html
- y pegar el código y guardar. Ya tienes un buscador como este.Añadir y personalizar un buscador en blogger
Personalizar el buscador
 Ahora, toca adaptarlo a tu gusto. A lo mejor quieres, la caja más ancha, ó un fondo de color distinto. Vamos a ver diferentes maneras sencillas de personalizar tu buscador:
  • Modificar las dimensiones del buscador
  •  Escribir un mensaje dentro del buscador
  • Cambiar el borde y el fondo del buscador
  •  Quitar el botón "Buscar"

                              MODIFICAR LAS DIMENSIONES DEL BUSCADOR

Esto es la foto del código precedente, pero puse en color, lo que nos interesa, para cambiar las dimensiones. Añadir y personalizar un buscador en blogger
size= "es el ancho de la caja"height: "la altura de la caja"
¿ Quizás, quieres escribir en el botón, otra cosa que sea buscar? value: "el nombre que quieres que aparezca"
 ¡Ojo! no tocas las comillas.

                           ESCRIBIR UN MENSAJE DENTRO DEL BUSCADOR


Añadir y personalizar un buscador en blogger
copiar este código
<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="20" style="height:20px;" type="text" value="buscar en el blog" /> <input id="search-btn" type="submit" value="Buscar" /></form>
- ir a  Diseño > añadir un gadget > html/javascript > editar html
- pegar el código y guardar.
Es basicamente el mismo código que el primero, la diferencia es que esta incluido el código siguiente: value="buscar en el blog". Puedes cambiar lo que esta entre las comillas, por lo que quieras.

                       CAMBIAR EL BORDE Y EL FONDO DEL BUSCADOR 

Para un buscador con un borde de puntitos y fondo grísAñadir y personalizar un buscador en blogger
copiar este código
<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" style="border: 1px dotted #000000; background:#ececec;" size=“20"style="height:20px;" type="text"value="se busca aquí" /> <input id="search-btn" type="submit" value="Buscar" /></form>
- ir a  Diseño > añadir un gadget > html/javascript > editar html
- pegar el código y guardar.
Para modificar el tamaño y color de los puntitos y/o el fondo tienes que modificar lo que esta en color
Añadir y personalizar un buscador en blogger
border: 1px tamaño de los puntitos
dotted: son los puntitos#000000 : el color de los puntitosbackground: #el color del fondo       

                      QUITAR EL BOTÓN BUSCAR 

Para quitar el botón es muy fácil, elimina esta parte  del código, únicamente esto), esta situado al final justo antes del < / form)
Añadir y personalizar un buscador en blogger
Existen diferentes maneras de instalar y personalizar los buscadores en internet. Uno que me gusta mucho es el de Creative Mindly.

Volver a la Portada de Logo Paperblog

Dossier Paperblog

Revista