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.
¡Gracias por suscribirte! ❀Lireth❀