En esta oportunidad compartire con ustedes un excelente buscador interno para el blog, el cual ha sido rediseñado por completo para darle un aspecto asombroso y muy distinto del buscador basico.


Para agregar el buscador a tu blog debes pegar en un elemento HTML/JavaScript lo siguiente:

<br />
<form action="URL DE TU BLOG/search" class="formulariodemo cf" method="get">
<input name="q" placeholder="ingresar texto ..." required="required" type="text" />
<button type="submit">buscar</button>
</form>
<br />
<style>

.cf:before, .cf:after {
content:»»;
display:table;
}
.cf:after {clear:both; }
.cf { zoom:1; }

/* el formulario en si mismo */
.formulariodemo {
background-color: #303941;
border-radius: 10px;
box-shadow: 0 0 2px #606971 inset;
margin: 0 auto;
padding: 15px;
width: 450px;
}

/* la caja donde se ingresa el texto a buscar */
.formulariodemo input {
background-color: #EEE;
border: none;
border-radius: 3px 0 0 3px;
float: left;
font-family: Tahoma;font-size:15px;font-weight: bold;
height: 20px;
padding: 10px 5px;
width: 330px;
}
.formulariodemo input:focus {
outline: 0;
background: #FFF;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

/* el estilo de del atributo placeholder debe ser declarado para cada navegador de modo separado */
.formulariodemo input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; }
.formulariodemo input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
.formulariodemo input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; }

/* aquí iría el estilo de del atributo required si es que se desea definirlo */
.formulariodemo input:required { box-shadow: none; }

/* el botón de envio */
.formulariodemo button {
background-color: #32CD32;
border: none;
border-radius: 0 3px 3px 0;
color: #FFF;
cursor: pointer;
float: right;
font-family: Tahoma;
font-size: 15px;
font-weight: bold;
height: 40px;
overflow: visible;
padding: 0;
position: relative;
text-transform: uppercase;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
width: 110px;
}
.formulariodemo button:hover{ background: #238E23 ; }
.formulariodemo button:active, .formulariodemo button:focus{ background: #32CD32; }
.formulariodemo button:before { /* el detalle del triángulo izquierdo */
content: «»;
border-color: transparent #238E23 transparent;
border-style: solid solid solid none;
border-width: 8px 8px 8px 0;
left: -6px;
position: absolute;
top: 12px;
}
.formulariodemo button:hover:before { border-right-color: #32CD32; }
.formulariodemo button:focus:before { border-right-color: #238E23; }

</style>

<br />

Debes reemplazar lo que esta en azul por lo que se indica y listo.

El resultado final lo puedes ver en Vagabundia

Categorías: Trucos Blogger

23 comentarios

Anonymous · noviembre 16, 2012 a las 9:06 pm

Genial este truco Juvinao, gracias por compartir

    Juvinao · noviembre 20, 2012 a las 4:45 pm

    Gracias por tu comentario amigo 😛

Chavo · noviembre 16, 2012 a las 10:21 pm

Genial! agregado a http://todo-anime-gratis.blogspot.com/ pero no si no enojas lo achique un poco por que no entraba en la columna de mi blog. en unos días me contacto para sacarme dudas para publicar acá 😉

Chavo · noviembre 16, 2012 a las 10:22 pm

Otra cosa positiva es que sale mas rápido (osea que no esta tan «pesado» como el propio buscador del blog)

    Juvinao · noviembre 20, 2012 a las 4:46 pm

    Ha quedado muy bien el buscador en tu blog y sin duda alguna es bastante liger 😛

No sin MyMakeUp · noviembre 17, 2012 a las 11:04 am

Hola. Si quisiera cambiar el color verde de «buscar» por uno fucsia, ¿dónde lo tendría que cambiar=? gracias.

    Juvinao · noviembre 20, 2012 a las 5:07 pm

    Busca #32CD32 y cambialo todas las veces que aparesca por el color que quieras (ya sabes en formato html)

FIBI · noviembre 17, 2012 a las 1:30 pm

Me ha gustado mucho este truco, lo añado a mi blog.

osman · noviembre 17, 2012 a las 11:08 pm

crei que cuando decias espectacular te referias a las funciones del buscador 😀

Posicionamiento SEO · noviembre 19, 2012 a las 12:43 pm

Las ventajas de usar Blogs o sitios con wordpress son las variedades de plugins o complementos que disponemos para mejorar y editar el sitio

leviomat · noviembre 21, 2012 a las 9:02 pm

Hola Juvinao.

te dejé un mensaje en facebook.
Ojalá me puedas ayudar.

saludos

RepBox · noviembre 29, 2012 a las 7:44 pm

Hola amigo. Disculpa, pero quiero saber si a este buscador puedo agregarle la funcion con la que cuenta google? (de ir mostrando los resultados dependiendo de las palabras agregadas) me parece que le llaman «Magic brows» de ante mano muchas gracias que andes de lujo por cierto esta al 100 tu web

    Hayder Juvinao · noviembre 30, 2012 a las 9:30 pm

    RepBox la verdad no se si se le pueda añadir esta funcionalidad pero de seguro lo intentare hacer.

    Gracias por tu comentario.

Salvador zapata · diciembre 14, 2013 a las 4:57 am

MUY BUENA MUCHAS GRACIAS ;-(

Fran · abril 2, 2014 a las 9:11 am

hola Juvinao! muchas gracias por todos los trucos que compartes, recién lo agregué en mi blog/directorio y quedó genial. Me gustaría preguntarte si conoces alguna opción para que al realizar la búsqueda (además de realizar la búsqueda) al hacer click se abran unas ventanas emergentes. Como ejemplo minube.com que al poner una búsqueda (por ejemplo: Roses) abre 4 ventanas de jetcost.es, kayak.es, momondo etc..
Un saludo y gracias

Anonymous · abril 25, 2014 a las 3:58 pm

Hola amigo al agregarlo me sale un link abajo para ir a un juego como lo quito?

Ivan Cruz · mayo 31, 2014 a las 11:57 pm

Se podra cambiar lo que dise en el cudro para poner el texto ?

    Hayder Juvinao · junio 8, 2014 a las 9:44 pm

    Busca <button type=»submit»>buscar</button> y cambia la palabra buscar :>)

    Saludos

Anonymous · noviembre 2, 2014 a las 5:03 pm

Cuando busco algo en mi pagina con ese buscador me aparece el error 404, que hago?

Anonymous · enero 15, 2015 a las 8:54 pm

AMIGO MUCHAS GRACIAS POR ESTE TIPO DE COSAS QUE EN ALGUN LUGAR DEL MUNDO LE SALBAN EL PELLEJO A ALGUIEN

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *