add

Agregar un buscador en blogger con un solo widget


Cuando los usuarios que visitan nuestro blog de blogger necesitan buscar otro tipo de temas en nuestro blog de blogger, es de suma importancia contar con un buscador integrado que realmente funcione y a si pueda mostrar los resultados de búsqueda en nuestro blog. Hoy les presento 6 tipos de buscadores con diferentes colores, los cuales funcionan con un solo widget, escoge el que mas te gusto y solo deberás insertarlo en un widget y ubicarlo donde tu quieras. El truco es muy fácil, solo tendrás que copiar el código y nada más, así que no voy a alargar este tutorial.


Agregar un buscador en blogger con un solo widget

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Diseño

Agregar un buscador en blogger con un solo widget

3 Busca el gadget que dice “Añadir un gadget” y ábrelo, se te abrirá una nueva ventana

Agregar un buscador en blogger con un solo widget
Agregar un buscador en blogger con un solo widget

Primer Estilo

Agregar un buscador en blogger con un solo widget

Encuentra el widget que dice “HTML/Javascript” ábrelo e inserta las siguientes líneas de código en su interior.

<style type="text/css">
#ayudadeblogger-searchbox{background:url(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.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>


Recuerda dar un clic en “Guardar” y ubica tu nuevo buscador donde tú quieras.

Segundo Estilo

Agregar un buscador en blogger con un solo widget

Si quieres este estilo debes insertarlo en un widget “HTML/Javascript” el código siguiente:


<style type="text/css">
#ayudadeblogger-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.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>

Recuerda dar un clic en “Guardar” y ubica tu nuevo buscador donde tú quieras.

Tercer Estilo

Agregar un buscador en blogger con un solo widget

Si quieres este estilo debes insertarlo en un widget “HTML/Javascript” el código siguiente:


<style type="text/css">
#ayudadeblogger-searchbox{background:url(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.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>

Recuerda dar un clic en “Guardar” y ubica tu nuevo buscador donde tú quieras.

Cuarto Estilo

Agregar un buscador en blogger con un solo widget

Si quieres este estilo debes insertarlo en un widget “HTML/Javascript” el código siguiente:


<style type="text/css">
#ayudadeblogger-searchbox{background:url(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.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>

Recuerda dar un clic en “Guardar” y ubica tu nuevo buscador donde tú quieras.

Quinto Estilo

Agregar un buscador en blogger con un solo widget

Si quieres este estilo debes insertarlo en un widget “HTML/Javascript” el código siguiente:


<style type="text/css">
#ayudadeblogger-searchbox{background:url(http://lh3.googleusercontent.com/-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.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>

Recuerda dar un clic en “Guardar” y ubica tu nuevo buscador donde tú quieras.

Sexto Estilo

Agregar un buscador en blogger con un solo widget

Si quieres este estilo debes insertarlo en un widget “HTML/Javascript” el código siguiente:


<style type="text/css">
#ayudadeblogger-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.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>

Recuerda dar un clic en “Guardar” y ubica tu nuevo buscador donde tú quieras.

Eso es todo

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Saludos.

3 comentarios:

  1. Como hago para achicarlo y que entre bien en mi blog? Gracias!

    ResponderEliminar
    Respuestas
    1. Hola, tendrias que hacer mas pequeña esta url de imagen http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.png, luego lo guardas y lo pegas en ves de la imagen.
      Saludos

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios