¿Cómo poner un botón de buscar en Blogger?

¡Hola, amores! El post de hoy es más complicado que los que he traído otros días sobre HTML, que en realidad solo han sido dos (el de quitar con la tecnología de blogger y el de personalizar el pie de página), así que hoy voy a ir más allá, os voy a enseñar a poner un botón de búsqueda como el que he puesto ahora en mi blog. No os asustéis es muy sencillito.

Primero nos vamos a ir a la parte de diseño y en la columna de gadgets vamos a insertar uno llamado HTML/Javascrip, igual que hicimos en el post de personalizar el pie de página, y en la ventana emergente que se nos abre pegamos el siguiente código:

<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>

<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Que buscas?";' onfocus='if (this.value == "Buscar+Enter") this.value = "";' size='28' type='text' value='Buscar+Enter'/></form>

En el lugar del texto rojo/rosa vamos a poner lo que queramos que aparezca en la cajita, yo como quería que apareciera Buscar+Enter lo he puesto así, pero también podéis poner Buscar, ¿Qué buscar?... cualquier cosa que se os ocurra.

El código anterior es para un buscador con el mío, sin botón, pero si queréis ponerle un botón para buscar en lugar de darle al enter lo que tenéis que hacer es muy sencillo.

 

Para poneros las cosas todavía más fáciles os voy a poner el código completito. 

<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Que buscas?";' onfocus='if (this.value == "¿Qué buscas?") this.value = "";' size='28' type='text' value='¿Qué buscas?'/><input id="search-buttom" value="Buscar" type="submit" /></form>

El texto en rojo/rosa es el que aparecerá en la cajita en la que se escribe y el texto en verde es el que aparecerá en el botón.

Pues bien, ahora mismo tenemos un botón simple y feo, entonces vamos a editarlo. Vamos a Plantilla > Personalizar > Avanzado > Añadir CSS. En añadir CSS nos aparecerá una cajita en blanco y ahí vamos a pegar este código:

#search-box {

width: 100%;  /* Ancho cuadro de búsqueda */

height: 23px; /* Alto del cuadro de búsqueda */

margin-top: 2px;

border: 1px solid #000000; /* Bordes de la cajita*/

background: #FBFAFA;  /* Color de fondo del cuadro de búsqueda */

text-align:center;

font: bold 15px Comfortaa; /*Tipo de letra y tamaño*/

border-radius: 15px; /*Bordes redondeados, si no los quieres, borrar esta línea*/

}

Esto sería para personalizar la cajita de texto, así que si queréis poner la opción con cajita solo tenéis que poner debajo del otro código el siguiente:

#search-buttom {

  border: 1px solid #000000; /* Borde del botón*/ 

  margin-left: -10px;

  color: white; /* Color de la letra del botón*/

  border-radius: 20px; /* Esto es para redondear los bordes del botón, si los quieres sin redondear borra esta línea*/

  position: relative;
  right: 30px;
  background: #fc96ab; /* Color del fondo del botón*/
  }

Bueno pues esto ha sido todo el tutorial, espero que os sea fácil instalar el botón y si tenéis alguna duda o no os ha quedado claro algún paso decírmelo por los comentarios o por gmail que yo os intentaré resolver la duda.

¡Así que ya sabéis lo que toca ahora! ¡Todo el mundo a instalar su botón de búsqueda! Ya veis que tampoco es para tanto esto del HTML. ¡Besos!