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 titulo de nuestras entradas como en el contenido de las mismas.
Por que es fundamental
Tener un buscador en nuestra pagina ayuda a los visitantes a buscar de forma rapida en nuestro blog, sin tener que estar dando vueltas por el mismo.
Ademas 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 codigo que mas nos guste de estos que te presento.

Esilo 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/AVvXsEgLhYhT_HzD3KzB-cSQHLYilaDZnATtPCXRpkjnO1qa6g4chMdhZXgeEwVBvHvGGWTNDJ4V5LrY0JSFr1eDalT0dLprTFX49NnlqxuK60PbbMbdP0jSE3xSZ8oxG7t67e3NumdOgl4vyCCU/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/AVvXsEgXFL6aIw8c904Zc228-hh-ZnV9ytkNZQLCvLcxu3SZ4WFR62Hx-l241UsQenW8ooYJy61lTcT3DNFVSQusuDbnBFIf0Pp5Neio-ZNdL7BEV-UdrtqgpJAYs6opua-fa8TXZ7ak4Av8UENu/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/AVvXsEgLhYhT_HzD3KzB-cSQHLYilaDZnATtPCXRpkjnO1qa6g4chMdhZXgeEwVBvHvGGWTNDJ4V5LrY0JSFr1eDalT0dLprTFX49NnlqxuK60PbbMbdP0jSE3xSZ8oxG7t67e3NumdOgl4vyCCU/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/AVvXsEgXFL6aIw8c904Zc228-hh-ZnV9ytkNZQLCvLcxu3SZ4WFR62Hx-l241UsQenW8ooYJy61lTcT3DNFVSQusuDbnBFIf0Pp5Neio-ZNdL7BEV-UdrtqgpJAYs6opua-fa8TXZ7ak4Av8UENu/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  3

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmwLY-58bH0b6C62P-yPjlNQnqinL9gHSSXIUnEP2oc5rqz1zlBeXlC5QzbvJ5OamMTMHPeO3hjANxOiO5v8H3IbYgnr6OWXTpH4SXwQJE5W22JSYQl3ybOHiuvsOCPnlEPeBB5H00oMLh/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/AVvXsEgPljhHqwlEa2eeybm2oUoZVImCMJaRfBS9s-fQQN70JYTB-Hbfcl4f5xqfBr_52GO76G_rbsY7GqJp88Zh1YQp0O6JBAyQNJ0_YPpx5dPqLevbDWrMdNeb7xewwiOqhRJeFrfvVjHV3R8h/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/AVvXsEgXHt7NoHCYuGUhPMS2fTO2gipWWbXRkO_BsvYr757C1C4xj8MsevCbwhhdpWBol0GQpWCSQRaZL0rIkhX58l2H6vbCEZruceys_cPV_vx9ey4M_1yHvIRGpQ8XICSdrfP_1zfYcRaFr_UK/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXHt7NoHCYuGUhPMS2fTO2gipWWbXRkO_BsvYr757C1C4xj8MsevCbwhhdpWBol0GQpWCSQRaZL0rIkhX58l2H6vbCEZruceys_cPV_vx9ey4M_1yHvIRGpQ8XICSdrfP_1zfYcRaFr_UK/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="" /></

Estilo 4

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Ytk0W1rVT1zWiJQUC03UCnF5VV4XL7cxsSwrVRAGsrVYnAicm-sb4mapkkJAUlpOkaHVIPwqyQeqrozdSt9FOa_P2_CMWkcwm1fe7PPrXt0BT9CPyJqIf0VmMWRhw6jNHftoRvOb4ybx/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/AVvXsEieTOeLnqc3efj-HXC5wahKFJezsUpMTtB8VptKdbl19a_n5KlDyxzBOgXgUnTGE5dQO2ZWUQMhaSbaWY5GL07lSc7-CoBNtCP-a1TzTDpvihoHwu6gGR2Jt4aep8ww5LbuKUCa2fOqMPBa/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/AVvXsEgT_PgmWgXZ3-9i_-heVW-RZscEZ0xQl3OvtLdK_uiTRujllmvhdhpLe58pu3WOaQhspXoRABKb9AUs3Kq8mCVeT7sFl37Mt8rB926zn_e5F1OylvTUOnG37YNPzAamSGHMz4utobmwGc4Z/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>

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