Añadir un Buscador Personalizado

agosto 27, 2013

Añadir un Buscador Personalizado


Al comenzar a redactar esta entrada tenía mis dudas. No sabía muy bien si encajaba mejor en Consejos para Optimizar tu Blog o Programación Básica para Bloggers. Finalmente, después de pensar un poco en ello, me decidí por la primera opción.

Sí, lleva algo de programación, pero básicamente un buscador lo que hace es ayudar a nuestras visitas a encontrar lo que buscan, mejorando así la navegación y usabilidad de nuestra bitácora, por lo que creo que, desde mi punto de vista, está mejor en la primera categoría.

Hoy vamos a ver como instalar un buscador personalizado en la sidebar de nuestro Blog. Como el mío, justo a la derecha.

Es muy sencillo, el código que tenemos que añadir como elemento HTML/Javascrip en Diseño es el siguiente:

<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>








Una vez añadido, para poder ir comprobando los cambios que hagamos en nuestra plantilla, vamos a ver el estilo que aplicaremos:

El código que vamos a usar es éste:


#search {
width: 228px; /* Ancho del buscador */
height: 25px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: #8FE1D8 url(#) no-repeat;  /* Color de fondo del buscador */
border-radius: 10px 10px 10px 10px; /* Borde del marco del buscador */

}
#search-box {
width: 180px /* Ancho del cuadro blanco de búsqueda */
margin-top: 3px;
border:0px;
background: #FFFFFF /* Color de fondo del cuadro de búsqueda */
text-align:center;
border-radius: 10px 10px 10px 10px; /* Borde del cuadro del buscador */
}





















Si copias el código tal cual en tu plantilla HTML (ahora te digo donde) el resultado sería éste:



Pero si modificas los campos que  he marcado en rojo por tus propios colores y efectos de redondeado, puedes dejarlo completamente integrado con la combinación de colores de tu Blog.

Ya  lo he comentado otras veces, pero la página que más me gusta para elegir códigos HTML es ESTA.

Es un código CSS así que para colocarlo en nuestra plantilla HTML, lo haremos antes de:

]]></b:skin>


Si has instalado el menú personalizado que vimos en ésta entrada, puedess poner este nuevo código justamente debajo, dejando un par de espacios.

*Si no lo has instalado, te aconsejo que visites esa entrada para ver exactamente donde debería ir este nuevo código.

Y ahora sí, en Vista Previa, después de haber añadido los dos códigos (el primero en Diseño y el segundo en nuestra plantilla HTML), puedes empezar a jugar con los colores y redondeos.

¡Espero que te sea útil! A mí me encanta como queda.







Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

18 pensamientos ¡falta el tuyo! ;)

  1. Personalizados queda más chulo :)
    gracias por compartirlo

    Besos!!

    ResponderEliminar
  2. Hola Celia!!!
    Antes de nada muchas gracias por el post ;) me encanta el buscador!!!!
    pero me gustaría mas ponerlo en la columna de mi blog en vez de en el menú horizontal, se podría hacer?
    Gracias!!

    ResponderEliminar
    Respuestas
    1. ¡Claro!

      Solo tienes que poner el primer código, el del buscador, como elemento HTML/Javascript en el sidebar de tu blog :)

      ¡Ya me cuentas!

      Eliminar
  3. tienes algun tutorial de como poner el boton me gusta para el blog completo? es decir, para que le den like a la página ,( no a las entradas) así como tu lo tienes que se juntan lo likes

    ResponderEliminar
    Respuestas
    1. ¡Hola! Que va, lo encontré buscando por internet ¡hay muchos! Solo tienes que buscar:

      poner botón de facebook en las entradas del blog

      ¡Feliz viernes!

      Eliminar
  4. Hola, sabes de algún código para tener un icono para el buscador, ejemplo una lupa, que cuando se le de click a la lupa aparezca el cuadro de Buscar... Yo ya tengo el "cuadro" en mi blog http://freshtechs1.blogspot.com pero me hace falta el icono que "esconda" el cuadro, y, que a su vez, al darle click lo muestre!

    ResponderEliminar
    Respuestas
    1. ¡Hola Francesco!

      Lamento no poder ayudarte, de momento no he probado nada parecido a lo que me mencionas :)

      ¡¡Lo siento!!

      Feliz martes y gracias por comentar ♥

      Eliminar
  5. Cucu preciosa
    Estoy Optimizando el blog XD ¡qué raro!
    Muchas gracias por los tutoriales, por todos.
    Desde luego me haces la vida más fácil ^.^
    Besitos ♥

    ResponderEliminar
  6. Hola Celia! como se puede poner el buscador en la barrra de páginas como tienes tu?

    ResponderEliminar
    Respuestas
    1. Hola guapa, para instalarlo como lo tengo yo, en el menú, tienes que usar un menú personalizado como el de esta entrada:

      http://www.elperrodepapel.com/2013/08/menu-horizontal-pestanas-blogger.html?showComment=1394190601597#c7533187699886593735

      Y añadir el código HTML del buscador personalizado al final del código del menú dentro del mismo gadget HTML/Javascript :)

      Es eso lo que me preguntabas ¿verdad?

      ¡Feliz viernes!

      Eliminar
  7. y se puede hacer también para el cuadro de suscripción por mail??

    gracias!

    ResponderEliminar
    Respuestas
    1. ¡Holar Bartollinna!

      Perdona el retraso, se me pasó tu comentario :)

      La suscripción por email también puede personalizarse pero con un código diferente y dependiendo del servicio de suscripción que uses, varía :)

      ¡Gracias a ti!

      Eliminar
  8. al fin lo logre! llevo un par de post que por mas que lo intento no me sale
    esque aun no entiendo bien como se deben escribir los codigos html
    pero este ya le hice check!
    saludos gracias por todo!!

    ResponderEliminar
  9. ¡Hola Celia! Antes de nada, muchísimas gracias por compartir tus conocimientos con nosotras, así podemos tener el blog tan bonito como el tuyo.

    Respecto a este tutorial, tengo un problema un poco raro. Verás, tengo dos blogs y quería instalar en ambos un buscado en la barra superior. En uno lo he conseguido sin problemas usando los códigos que has compartido y trasteando un poco, sin embargo, en el otro sólo puedo instalar el buscador pero no personalizarlo. Lo he intentando mil veces, siguiendo exactamente los mismos pasos que en el otro, pero nada. Me ha ocurrido varias veces, creo que hay algún problema en la configuración de los CSS, ¿tienes idea de qué puede pasar?

    ResponderEliminar
    Respuestas
    1. ¡Hola, Canela y Naranja!

      Pues no sé decirte, guapa, si sigues los mismos pasos es muy raro que en uno funcione y en otro no ¿tienes en los dos la plantilla simple/sencilla de blogger? Tendría que verlo para decirte algo más ;)

      ¡Feliz semana!

      Eliminar
    2. Sí,hija, en los dos. Aunque en el "viejo" suelo tener problemas, no es la primera vez que me pasa. Mira, este es el viejo: http://www.canelaynaranja.es/

      Y este el nuevo: http://www.eldestrabalenguas.es/

      Eliminar
  10. Hola, podrías decirme como personalizo los comentarios de mi blog? :(
    Muchas graciaas

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.