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

10.3.15

¡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!

8 comentarios:

  1. ¡Gracias por el tutorial!
    Besos!

    ResponderEliminar
    Respuestas
    1. ¡De nada! <3 Espero que te sirva de ayuda.

      Besos!

      Eliminar
  2. ¡Hola guapa!
    Si no fuera porque ya tengo un buscador, ponía este :D
    Muchas gracias♥
    Besitos<3

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Bueno siempre puedes dejarlo por ahí guardadito, jajajaja, para tu próximo chachi diseño.

      Besitos <3

      Eliminar
  3. Es precioso, me gusta mucho el rollo minimalista. Pongo el post en favoritos para hacerlo cuando tenga una tarde libre :) ¡Muchas gracias!
    Me quedo por aquí.
    ¡Un saludo!

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Bienvenida al blog! A mí también me gustan las cosas minimalistas, quiero las cosas bastantes simples. Seguro que te quedará precioso en tu blog.

      Besos!

      Eliminar
  4. Buena entrada guapa!

    La tendré en cuenta cuando haga nuevo diseño ^^

    Besicos :D

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Muchas gracias ;) Yo estaba buscando desesperadamente un buscador y me encontré con este y fue amor a primera vista.

      Besos <3

      Eliminar

Dejar siempre comentarios respetuosos, acepto todo tipo de críticas pero siempre desde el respeto.
No hace falta el spam, siempre que pueda me pasaré por vuestros blogs.

Related Posts Plugin for WordPress, Blogger...