Añade un espectacular buscador interno a tu blog

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

23 thoughts on “Añade un espectacular buscador interno a tu blog

  • noviembre 16, 2012 en 9:06 pm
    Permalink

    Genial este truco Juvinao, gracias por compartir

    Responder
  • noviembre 16, 2012 en 10:22 pm
    Permalink

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

    Responder
    • noviembre 20, 2012 en 4:46 pm
      Permalink

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

      Responder
  • noviembre 17, 2012 en 11:04 am
    Permalink

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

    Responder
    • noviembre 20, 2012 en 5:07 pm
      Permalink

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

      Responder
  • noviembre 17, 2012 en 11:08 pm
    Permalink

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

    Responder
  • noviembre 19, 2012 en 12:43 pm
    Permalink

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

    Responder
  • noviembre 21, 2012 en 9:02 pm
    Permalink

    Hola Juvinao.

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

    saludos

    Responder
  • noviembre 29, 2012 en 7:44 pm
    Permalink

    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

    Responder
    • noviembre 30, 2012 en 9:30 pm
      Permalink

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

      Gracias por tu comentario.

      Responder
  • abril 2, 2014 en 9:11 am
    Permalink

    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

    Responder
  • abril 25, 2014 en 3:58 pm
    Permalink

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

    Responder
  • noviembre 2, 2014 en 5:03 pm
    Permalink

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

    Responder
  • enero 15, 2015 en 8:54 pm
    Permalink

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

    Responder

Deja un comentario

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