SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

23 jul. 2014

Cómo tener un buscador en el blog personalizado.

Buenas!!!
Vamos con otro tutorial súper sencillito y bastante reclamado.
Blogger tiene su propio gadget para buscar cositas en nuestro blog, pero como nos gusta personalizarlo todo pues hoy voy a explicar cómo tengo yo el buscador y os daré el código para que os lo personalicéis como os guste a vosotras.

Para agregarlo deberéis ir a la página de administración de vuestro blog
Entrar a Diseño
Añadir gadget HTML/JavaScript
Copiar el código personalizado
Guardar

Este es mi buscador:

Y ahora os pego Mi código:
<form action="http://lireth.blogspot.com.es/search" class="formulariodemo cf" method="get">
<input name="q" placeholder="¿Qué buscas?" required="required" type="text" /><button type="submit">Buscar</button>
</form><style>

 .cf:before, .cf:after {
   content:"";
   display:table;
 }
 .cf:after {clear:both; }
 .cf { zoom:1; }

/* la caja donde se ingresa el texto a buscar */
 .formulariodemo input {
   background-color: #F9F5EC;
   border: 1px;
   border-style: dashed;
   border-color: #F9A0AB;
   border-radius: 4px 4px 4px 4px;
   float: left;
   font-family: Delius;
   font-size:13px;
   color: #000000;
   height: 25px;
   padding: 0px 0px;
   width: 154px;
 }
 .formulariodemo input:focus {
   outline: 0;
   background: #F8F5EC;
   box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
 }

 /* el estilo de del atributo placeholder debe ser declarado para cada navegador de modo separado */
 .formulariodemo input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; }
 .formulariodemo input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
 .formulariodemo input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; }

 /* aquí iría el estilo de del atributo required si es que se desea definirlo */
 .formulariodemo input:required { box-shadow: none; }

  /* el botón de envio */
 .formulariodemo button {
   background-color: #F9F5EC;
   border: 1px;
   border-style: dashed;
   border-color: #F9A0AB;
   border-radius: 4px 4px 4px 4px;
   color: #000000;
   cursor: pointer;
   float: right;
   font-family: Delius;
   font-size: 14px;
   font-weight: bold;
   height: 27px;
   overflow: visible;
margin: auto;  
padding: 0;
   position: relative;
   text-transform: none;
   width: 70px;
 }
 .formulariodemo button:hover{ background: #F0E5CB ; }
 .formulariodemo button:active, .formulariodemo button:focus{ background: #F0E5CB; }
</style>

Bien, veis que os he remarcado algunas cositas, vamos a verlas:
Lo que está marcado en ROSA, la dirección del blog, tenéis que poner la vuestra sustituyendo lireth por vuestra dirección por ejemplo:
http://lireth.blogspot.com.es/search Pues Perica pondría...http://Pericaysuscosas.blogspot.com.es/search ¿vale? Si no lo hacéis así exactamente no os funcionará.

Al principio del código he marcado en Azul el texto que podéis personalizar.
Luego lo que está en azul más abajo,es el titulito del bloque Css, pues todo eso es personalizable:
Tipo de fuente
color
borde
tipo de borde
tamaño...
TODO

¿Qué significa hover? Significa para entendernos, pasar el ratón por encima sin hacer click, así que si queréis que cuando el buscar o lo que sea cambie de color cuando pasamos el ratón por encima, solo tendréis que poner en hover un color distinto a los demás.

En cuanto a TODO el resto del código a estas alturas os lo sabéis y si no, ya sabéis lo que pienso, toqueteando se aprende todo si se os dan las herramientas adecuadas.

Aunque como siempre si tenéis alguna duda o algo no os sale, Maileando se arregla casi todo.
Besotes.

Lireth's Notebook

12 comentarios:

  1. Gracias!!!
    Me lo guardo para las vacaciones, que tendré más tiempo.
    Bss

    ResponderEliminar
  2. Me parece muy bueno el tuto pero como siempre cuando empiezo a tocar algo del html NO me funciona!!!
    Besitos

    ResponderEliminar
    Respuestas
    1. mmmm solo tienes que añadir un gadget, copiar el código que he puesto y guardarlo. Luego miras como queda y si quieres retocar color, forma, etc... cambias los parámetros que explico después del código que os he dado.
      Muah!

      Eliminar
  3. Me gusta tu buscador. Yo ya había toqueteado un poco el estilo del mío, pero creo que lo voy a cambiar siguiendo tu explicación, que me gusta más.

    Gracias.

    ResponderEliminar
  4. Muchas gracias, feliz finde y vacaciones. Besos.

    ResponderEliminar
  5. Muchas gracias por el tutorial!!
    Un saludo

    ResponderEliminar
  6. Ya tengo nuevo buscador. Es genial.

    Muchas gracias

    ResponderEliminar
  7. Muchas gracias por este tutorial!! Al fin tengo un lindo buscador en mi blog.
    Saludos

    ResponderEliminar
  8. Excelente!!! muchas gracias!!!

    ResponderEliminar
  9. Otro tutorial genial! Ya me voy a poner a crear mi propio buscador :-) Muchas gracias por este tutorial!
    Besitos

    ResponderEliminar
  10. Que bonito ha quedado en mi blog, muchas gracias)
    Un saludo.

    ResponderEliminar
  11. Graciaaas! facilito y lindo

    ResponderEliminar