Buscadores para nuestro blog

Como todos sabemos, tener un buscador incluido en nuestro blog o pagina web es fundamental.

Como dice la palabra el buscador es para buscar palabras escritas dentro del buscador tanto en el título de nuestras entradas como en el contenido de las mismas.
Por qué es fundamental
Tener un buscador en nuestra página ayuda a los visitantes a buscar de forma rápida en nuestro blog, sin tener que estar dando vueltas por el mismo.
Además, el buscador nos da un aspecto muy profesional a nuestra pagina.
Incluir un buscador en mi blog
Par incluir un buscador en nuestro blog solo tenemos que ir a Diseño > Añadir un Gadget.
Dentro ingresamos el código que más nos guste de estos que te presento.

Indice

Estilo 1
Estilo 2
Estilo 3
Estilo 4
Estilo 5

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso

Estilo 1

 <style>
#searchbox {
width: 260px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFo855tRSecWWWodbk-ESFteOuWa1xrhpa0tOdlMu5mUsuWChYNJVX17mTFkfKvNhW0_BlvscQvUIgTYK8kghUFlJ69Rl9V3X7vwyS57DOQX4zPzDNRypLM-G2NO-QzgIlpgHkZvU05wMD/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 190px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdEJVjQWMUoa47ItG1_WOWzKxkEOgCoXM0oHebYwX7SFadQh2WdxompbedJDkhHF6_A6YM51gN3asb4sqvAICv2bYLi4w5TXmKanHPJHRlTmlCyy1VQGMpM9GytUq09_FpicRfbnLP7ZGZ/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Ingrese su búsqueda aquí..." />
<input id="button-submit" type="submit" value=" "/>
</form>

 Estilo 2

 <style>
#searchbox {
width: 260px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFo855tRSecWWWodbk-ESFteOuWa1xrhpa0tOdlMu5mUsuWChYNJVX17mTFkfKvNhW0_BlvscQvUIgTYK8kghUFlJ69Rl9V3X7vwyS57DOQX4zPzDNRypLM-G2NO-QzgIlpgHkZvU05wMD/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 190px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdEJVjQWMUoa47ItG1_WOWzKxkEOgCoXM0oHebYwX7SFadQh2WdxompbedJDkhHF6_A6YM51gN3asb4sqvAICv2bYLi4w5TXmKanHPJHRlTmlCyy1VQGMpM9GytUq09_FpicRfbnLP7ZGZ/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Ingrese su búsqueda aquí..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Estlilo 3

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UqhFddYZDdCjO-d6o3nf6DN88xSuJr5H25nQLnJx0rrjN5nHEt5IGBP-qN9y7T1rI20Zn1anIeEf8Jb_iO7upHyxVH4Ojuarj0JJxs3jGY1RuSRX3I8K5N7g9bxvRnJwZrwMnmgMW2sh/s1600/searchbar.png) no-repeat;width:208px;height:29px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDLTYyzl78RP3-T4acaR9HJ8cHXNWAfmkD2WFafLlmg6hxWWkIY2xyvBajwDpcbV23-25JaBWEpc4eWR1icUhDq7OkteAd3hYY-uO8e72A7u9sVuFGHPhDDZSgUo9Yg_umAI51VuLPINP8/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-3Kg12vip8o4tB_-3O3431GLojtxb-lKONDc_3H6m-_u3bMJ58f_VBpgWPc2jB0JSbcHl0c_0z-msNZTrp2rWBgZq4yd_foemkrQYWYNqmdRgZVpephrVv7PPhSqAPA-kx0oRePSZ0WlC/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-3Kg12vip8o4tB_-3O3431GLojtxb-lKONDc_3H6m-_u3bMJ58f_VBpgWPc2jB0JSbcHl0c_0z-msNZTrp2rWBgZq4yd_foemkrQYWYNqmdRgZVpephrVv7PPhSqAPA-kx0oRePSZ0WlC/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></

 Estlilo 4

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQJ1voHcHJDl_eb4OwNH9EvIueVB7LrLs7dsKiYC86xEOVMrJrVj3P-Oz-Mtr1rKd2XJFU2V0CNnCClQCo4K3RhkhyTZ0yObzNj-m0UfQWjsFefcOj6bSgR2ivF6StiGYQl7akE7TxRuq/s1600/search-box.png) no-repeat;height:27px;width:202px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio-W429NPVgvHX-tADvRttQkFaqeBBehQGqPxMmDpX00NE4Y1U9K6ru9XlMMqeuuLCHMIi9wDF5tgytLCjbPNaRyZDjiZT2hDLOdjPrpsUCJR3jONXfbRUuQO4DQqcnEnSpycmVCSePeO4/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMS6YsV_ZT4tTE0xZDH9AeKpVFLa0ci3KZ-6IPSlzHEAWR-ovpePP-_oU_Ck998pjS0PpOBFZ6B4TR6zOeKOhGFI7wBYDuMYosEHEU_hrk2NcTnO69SVLI0BtNMKPFxlsTcPKmXIyuZxM3/s1600/search-button-hover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>

Estilo 5

     <style type="text/css">
    #searchbox{background:url(http://2.bp.blogspot.com
    </style>
    <form id="searchbox" method="get" action="/search" autocomplete="off"><input class="textarea" name="q" type="text" size="15" placeholder="Search here..." /><input id="button-submit" type="submit" value="" /></form>