Mil Trucos Blogger

Añade un espectacular buscador interno a tu blog

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

23 Comentarios

  1. Anonymous Anonymous
    Noviembre 16, 2012    

    Genial este truco Juvinao, gracias por compartir

    • Noviembre 20, 2012    

      Gracias por tu comentario amigo 😛

  2. Noviembre 16, 2012    

    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á 😉

  3. Noviembre 16, 2012    

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

    • Noviembre 20, 2012    

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

  4. Noviembre 17, 2012    

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

    • Noviembre 20, 2012    

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

  5. Noviembre 17, 2012    

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

  6. Noviembre 17, 2012    

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

  7. Noviembre 19, 2012    

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

  8. Noviembre 21, 2012    

    Hola Juvinao.

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

    saludos

  9. Noviembre 29, 2012    

    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

    • Noviembre 30, 2012    

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

      Gracias por tu comentario.

  10. Diciembre 14, 2013    

    MUY BUENA MUCHAS GRACIAS ;-(

  11. Abril 2, 2014    

    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

  12. Anonymous Anonymous
    Abril 25, 2014    

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

  13. Mayo 31, 2014    

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

    • Junio 8, 2014    

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

      Saludos

  14. Anonymous Anonymous
    Noviembre 2, 2014    

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

  15. Anonymous Anonymous
    Enero 15, 2015    

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

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo