Hoy vamos agregar un buscador para nuestra página con un widget.
Ya sabemos la importancia de tener un buscador integrado, y que pueda hacer bien las búsquedas en nuestro blog.
Aquí les dejo algunos de diferentes formas.
Una vez elija el que quiera lo integramos en nuestro blog.
Para ello nos vamos a Diseño > Añadir un Gadget > HTML-Javascript
Insertamos el código que hemos elegido y le damos a guardar.
Lo colocamos en la parte de nuestra plantilla que queramos.
Aqui dejo algunos:
En color azul
En color gris
En color rojo
En color naranja
En color negro
Ya sabemos la importancia de tener un buscador integrado, y que pueda hacer bien las búsquedas en nuestro blog.Aquí les dejo algunos de diferentes formas.
Una vez elija el que quiera lo integramos en nuestro blog.
Para ello nos vamos a Diseño > Añadir un Gadget > HTML-Javascript
Insertamos el código que hemos elegido y le damos a guardar.
Lo colocamos en la parte de nuestra plantilla que queramos.
Aqui dejo algunos:
En color azul
<style type="text/css">
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP7ElToR3GK14ppvB70zTDYnwRq1hy_wAje8AhwMESZD1G1kxcLZ3G_ie8qxc7mKOTuGjKueoFvXDj-6E7ChXhaYLNYX5hzMzIHuRY-FpX_LfKWSRzUTT_Y3s_fSNU2RPYPTqCJlCylHTY/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP7ElToR3GK14ppvB70zTDYnwRq1hy_wAje8AhwMESZD1G1kxcLZ3G_ie8qxc7mKOTuGjKueoFvXDj-6E7ChXhaYLNYX5hzMzIHuRY-FpX_LfKWSRzUTT_Y3s_fSNU2RPYPTqCJlCylHTY/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
En color gris
<style type="text/css">
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnD2TdOKH1zJDJpmmi3cTZ0Pv23VTweVpGrSJVGbCbYkNfHgOS7h5yQWeoJJocmD9eqoI3PuFLzuIEmnKLL2vDjKuON-XRlHbMZXkOi0xqD8r0zX3jgtbAZ62Tg4tar3gYNLVGLMadLtsT/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
En color gris y buscador rojo#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnD2TdOKH1zJDJpmmi3cTZ0Pv23VTweVpGrSJVGbCbYkNfHgOS7h5yQWeoJJocmD9eqoI3PuFLzuIEmnKLL2vDjKuON-XRlHbMZXkOi0xqD8r0zX3jgtbAZ62Tg4tar3gYNLVGLMadLtsT/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
<style type="text/css">
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqDhmprQbt0shZf7PpSLiKpC-hzwiCaq9ok4YMo-kc_pwkX9vwNC83FXwjKcJFh4FPPAQBn8GZqSpDh_pIpk2jStp4KEY2B0efK_mbs0GgumV8Clxlm4Hw8gKSZNYpbfwqfDAgCjIHTYY/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqDhmprQbt0shZf7PpSLiKpC-hzwiCaq9ok4YMo-kc_pwkX9vwNC83FXwjKcJFh4FPPAQBn8GZqSpDh_pIpk2jStp4KEY2B0efK_mbs0GgumV8Clxlm4Hw8gKSZNYpbfwqfDAgCjIHTYY/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
<style type="text/css">
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqDhmprQbt0shZf7PpSLiKpC-hzwiCaq9ok4YMo-kc_pwkX9vwNC83FXwjKcJFh4FPPAQBn8GZqSpDh_pIpk2jStp4KEY2B0efK_mbs0GgumV8Clxlm4Hw8gKSZNYpbfwqfDAgCjIHTYY/3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqDhmprQbt0shZf7PpSLiKpC-hzwiCaq9ok4YMo-kc_pwkX9vwNC83FXwjKcJFh4FPPAQBn8GZqSpDh_pIpk2jStp4KEY2B0efK_mbs0GgumV8Clxlm4Hw8gKSZNYpbfwqfDAgCjIHTYY/3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
En color naranja
<style type="text/css">
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgncmsgtqJq4r0In21H_GVO0Mc6GjQqfPjC3r9_0qlr5r-uQMGUf9rKSzKhuncRVRxEfojg_Unn7HklxLC0Lm2gHk766_Y-RMc5zlcxq99BgqMbib82iBCEuiR32M-sqmk0tXI6TpGlwn2F/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgncmsgtqJq4r0In21H_GVO0Mc6GjQqfPjC3r9_0qlr5r-uQMGUf9rKSzKhuncRVRxEfojg_Unn7HklxLC0Lm2gHk766_Y-RMc5zlcxq99BgqMbib82iBCEuiR32M-sqmk0tXI6TpGlwn2F/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
En color negro
<style type="text/css">
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YY8pZ4xe4do0SMWFJLAaU3t2Fy5WVX31jhEkVJ0rvMYNtuVWN2sP4Tn79uBTwam8ZRQG1cdojOf33SrWAYfJnvSNRmx9vy-IAZwUubnJxHct5U5sKWquIsHX5cZdzAbWTEV06kqBpqDq/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#ayudadeblogger-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YY8pZ4xe4do0SMWFJLAaU3t2Fy5WVX31jhEkVJ0rvMYNtuVWN2sP4Tn79uBTwam8ZRQG1cdojOf33SrWAYfJnvSNRmx9vy-IAZwUubnJxHct5U5sKWquIsHX5cZdzAbWTEV06kqBpqDq/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#ayudadeblogger-searchform{display: block;padding: 12px;margin:0;}
form#ayudadeblogger-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#ayudadeblogger-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="ayudadeblogger-searchbox">
<form id="ayudadeblogger-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>