DOS GENIALES ESTILODS DE BUSCADORES PARA TU BLOG DE BLOGGER
By Blogs Famag - noviembre 13, 2020
El buscador que trae Blogger por defecto es muy sencillo visualmente hablando, por eso el día de hoy traigo dos estilos de buscadores muy buenos que mejorarán mucho el aspecto de tu blog, sin más preámbulos empecemos el tutorial de hoy.
Dos geniales estilos de buscadores para Blogger
Para agregar este gadget solo ve a Diseño, Añadir gadget, HTML/JavaScript y pega allí lo siguiente:
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Ir a Blogger
1-Un clic en “Diseño” 
2-Clic en “Añadir un gadget” 
3-Busca el widget que dice “HTML-Javascript” y ábrelo 
4-Coloca el siguiente codigo en el interior 
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5HR0UMQqZmJ3aMYLL4ywN2sy5vqibFuD-OlpI9kX4LJuYKbpfgYDWXvT89AZs3a_C2xDtx4kLe9FJFE7viC0GomM4Ss24mPcbaMXjsqVqm14JfsVVMFrReaknUyNhiZoJlnmIY9xNSKQ-/s1600/search-box.png) no-repeat;
}
#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: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #f2f2f2 !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUeKaOhlL4pAtcIC7O9SfnXSm5_izIV0F37gbP5WzfLuFE7f5Y03ve60lav8P-0DWZHAVrnhJv6bcpkgctgDihWrr9KMWZrdMQzD1Y2uc521ClgX1hhdP6ufp8X4MxcOB57RTRwX8Vo5Jk/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiceci27uiAbCZCIJsv1oc8jLQTNS62guBdhcm_hhinUwggjh5IiC0pPW-9BL6Pzyy-BiHDTqAI-dYAxQMRLEuoTsvREvrJhiV3Qhco14_f_yoCrgxNYUjngT9lUIv3i0lDiCOFJOMrCV2y/s1600/search-icon-hover.png);
}
</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>
El segundo estilo de buscador se ve de la siguiente manera:
buscador Nº 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/AVvXsEhiWpuCGMPHTtRnACzGiJsokd_4Sg-V9GxK_X9Z02pbFalYTkRVtc23QJANHfPMI8Pqendck2wlhf9NgU4Lg8puNS1yEw7nwHXjc2FsAZEz1EbgHSPVxhfXpJoZvZaAMZrdZwUuS8F2aBW9/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/AVvXsEiJ-i57wYMmlaxJXJGStThd3TuFyJWS6i6jHg_9QrUIG_Gx9VFNts5eXAdN773xkUifMx8OpB8mbm6H5ilGhiTXLwlS2Vyi1lA-7VJWjgZsav5xsqv1dWCtn1jVhMrm44wsT6vTQKjs3aZg/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>
Despues de haber insertado el código, un clic en "Guardar"
El primer buscador se ve de la siguiente manera:
buscador Nº 1 
0 comentarios