10/3/15

Añadir y personalizar un buscador en blogger

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.

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. 


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









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ís


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


border: 1px tamaño de los puntitos
dotted: son los puntitos
#000000 : el color de los puntitos
background: #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)






Existen diferentes maneras de instalar y personalizar los buscadores en internet. Uno que me gusta mucho es el de Creative Mindly.

1 comentario:

Related Posts Plugin for WordPress, Blogger...