Superbarra de busqueda para Blogger

Todos sabemos lo importante que es el formulario de busqueda para un blog para localizar los articulos. Lo esencial es que este a la vista para que nuestros lectores encuentren lo que estan buscando, y creo que esta la veran seguro. Se trata de un diseño basado en otra que vi hace poco, pero que he retocado y modificado a mi gusto. Como podeis ver, aparte de sus dimensiones, tiene un diseño elegante, actual y queda bien donde la pongas. Su funcion de busqueda en Blogger la realiza perfectamente sin problema alguno y esta realizada completamente con CSS3, o sea que no contiene ninguna imagen en su diseño.

Para poner esta superbarra en tu blog, te diriges a la Plantilla › Edición de HTML, buscas la etiqueta </header> y pegas el siguiente codigo justo arriba. Si no localizaras esta etiqueta, tambien puedes ponerlo en un gadget HTML en la parte de arriba de la cabecera. Para que la situes en el sitio exacto que tu quieras, modifica top:120px;right:20px; esto regula distancia de la barra desde la parte de arriba (top) y desde la parte derecha (right).

ver codigo

<form id="searchbox" action="/search" method="get"><input id="search" name="q" type="text" placeholder="buscar en este blog"><input id="submit" type="submit" value="Buscar"></form>

<style>

#searchbox
{       top:120px;right:20px;
        position:absolute;z-index:99999;
        background: #eaf8fc;
        background-image: -moz-linear-gradient(#fff, #d4e8ec);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
        -moz-border-radius: 35px;
        border-radius: 35px;
        border-width: 1px;
        border-style: solid;
        border-color: #c4d9df #a4c3ca #83afb7;
        width: 500px;
        height: 35px;
        padding: 10px;
        margin: 10px auto 10px;
        overflow: hidden;
}
#search, #submit
{
        float: left;
}
#search
{
        padding: 5px 9px;
        height: 23px;
        width: 380px;
        border: 1px solid #a4c3ca;
        font: normal 13px 'trebuchet MS', arial, helvetica;
        background: #f1f1f1;
        -moz-border-radius: 50px 3px 3px 50px;
         border-radius: 50px 3px 3px 50px;
         -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
#submit
{
font-size: 18px !important;font-family:century gothic !important;color: #ffffff !important;font-weight: bold !important;text-shadow: -1px 0 #0C4EAF, 0 1px #0C4EAF, 1px 0 #000000, 0 -1px #0C4EAF, -1px 1px 2px #0C4EAF !important;
        background-image: linear-gradient(bottom, rgb(8,121,208) 41%, rgb(97,186,242) 71%);
background-image: -o-linear-gradient(bottom, rgb(8,121,208) 41%, rgb(97,186,242) 71%);
background-image: -moz-linear-gradient(bottom, rgb(8,121,208) 41%, rgb(97,186,242) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(8,121,208) 41%, rgb(97,186,242) 71%);
background-image: -ms-linear-gradient(bottom, rgb(8,121,208) 41%, rgb(97,186,242) 71%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.41, rgb(8,121,208)),
    color-stop(0.71, rgb(97,186,242))
);
        -moz-border-radius: 3px 50px 50px 3px;
        border-radius: 3px 50px 50px 3px;
        border-width: 1px;
        border-style: solid;
        border-color: #0C4EAF #0C4EAF #0C4EAF;
         -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
         -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
         box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;             
        height: 35px;
        margin: 0 0 0 10px;
        padding: 0;
        width: 90px;
        cursor: pointer;
        font: bold 14px Arial, Helvetica;
        color: #23441e;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#submit:hover
{
        background-image: linear-gradient(bottom, rgb(97,186,242) 41%, rgb(8,121,208) 71%);
background-image: -o-linear-gradient(bottom, rgb(97,186,242) 41%, rgb(8,121,208) 71%);
background-image: -moz-linear-gradient(bottom, rgb(97,186,242) 41%, rgb(8,121,208) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(97,186,242) 41%, rgb(8,121,208) 71%);
background-image: -ms-linear-gradient(bottom, rgb(97,186,242) 41%, rgb(8,121,208) 71%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.41, rgb(97,186,242)),
    color-stop(0.71, rgb(8,121,208))
);
}   
#submit:active
{
        background: #087AD0;
        outline: none;
         -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#submit::-moz-focus-inner
{
       border: 0;  /* Small centering fix for Firefox */
}           
#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
}
#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
}
#search:-ms-placeholder {
   color: #9c9c9c;
   font-style: italic;
}
#search.placeholder {
   color: #9c9c9c !important;
   font-style: italic;
}

</style>