Hacktime

Que seria de la web sin este blog

Buscador Interno sin salir del blog

Posted by yaju en mayo 20, 2007

Hola, ¿Cómo va?, nuevamente estoy posteando en el blog para acercarles una utilidad más que un truco. Esto es muy básico y a la vez cómodo, un buscador interno sin salir de nuestro blog.

La mayoria de los blog’s cuenta con un buscador interno, pero más que interno es externo, estos blog’s o bien ustedes en mayoria suelen utilizar el buscador “BlogSearch”, un buscador de blog’s propiedad de Google; Este código resulta ser molesto y a la vez incomodo ya que sales del blog.

Eso trataremos de implantar en nuestro blog para no tener que salir del mismo y utilizar otro más práctico, en mi blog pueden ver que tengo el buscador debajo de título, y si buscan no salen del blog sino que busca internamente como de verdad lo nesecitamos. En blog WordPress verán que tiene un buscador que no sale del blog.

Hay varias alternativas en cuanto este “hack”, puedes colocarlo debajo del título o en tu sidebar, como más cómodo te quede. El código de buscador será el siguiente, pueden ver alguna que otra alternativa.

1)Buscador Simple; Solamente el botón “buscar” y el cuadro de texto.

<form id=”searchthis” action=”/search” style=”display:inline;” method=”get”><input id=”search-box” name=”q” type=”text”/><input id=”search-btn” value=”Ir!” type=”submit”/></form>

2)Buscador con imagen. Incluye una imágen sustituyendo el botón que generalmente dice “Buscar” también incluye el cuadro de texto.

<form id=”searchthis” action=”/search” style=”display:inline;” method=”get”>
<input id=”search-box” name=”q” type=”text”/>
<input border=”0″ alt=”Buscar” src=”http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Crystal_Clear_app_xmag.png/32px-Crystal_Clear_app_xmag.png&#8221; type=”image”/>

3)Buscador con texto en cuadro de texto; Incluye texto dentro del cuadro donde se coloca la palabra a buscar y el botón buscar.

<form action=’/search’ id=’searchthis’ method=’get’ style=’display:inline;’>
<input id=’search-box’ name=’q’ onblur=’if (this.value == “”) this.value = “Buscar en el Blog”;’ onfocus=’if (this.value == “Buscar en el Blog”) this.value = “”;’ type=’text’ value=’Buscar en el Blog’/>
<input class=”submit” type=”submit” value=”Buscar” />
</form>

4)Buscador con Imágen en el botón buscar y texto en el cuadro de texto. Incluye texto en el cuadro que introducimos en la palabra a buscar y cambia el botón “Buscar” por una imagen (en este caso una lupa)

<form action=’/search’ id=’searchthis’ method=’get’ style=’display:inline;’>
<input id=’search-box’ name=’q’ onblur=’if (this.value == “”) this.value = “Buscar en el Blog”;’ onfocus=’if (this.value == “Buscar en el Blog”) this.value = “”;’ type=’text’ value=’Buscar en el Blog’/>
<input alt=’Buscar’ border=’0′ src=’http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Crystal_Clear_app_xmag.png/32px-Crystal_Clear_app_xmag.png&#8217; type=’image’/>
</form>

Bien, todas esas son las alternativas que presenta un buscador interno que sea útil, ahora hay que colocarlo donde queramos, para eso hay otras alternativas también.

a) Colocarlo debajo de título, como aparece en mi blog..

Para eso nos vamos a Plantilla–>Edición HTML–>Buscamos—>

<div id=’crosscol-wrapper’ style=’text-align:center’>
<b:section class=’crosscol’ id=’crosscol’ showaddelement=’no’/>
<——-Aca el código que elijas——–>
</div>

En la parte del código puede ser que aparezca algún artilugio o widget, eliminalo o caso contrario ponlo debajo de mismo (suele ocurrio en blog’s que contienen debajo del título una descripción).

b) O bien Añadirlo en la sidebar desde elementos de página y HTML/JAVASCRIPT.

Espero que le sea de utilidad y no duden en consultar😀

8 comentarios to “Buscador Interno sin salir del blog”

  1. Joseph Ramsey said

    Hola Leonel!
    Este buscador interno es mucho mas sencillo que el de hace unos días! Bien ahi!😀

    Acabo de implementarlo, y probarlo… funciona perfectamente! jojo

    Pero una consultilla: Hay forma de modificar a gusto el ancho del cuadro de texto, y también el tamaño de la imagen?
    (bueno, supongo que también se puede cambiar por otra imagen)
    Porque lo pongo en mi sidebar pero por el ancho del mismo se descuadra el buscador :p

  2. Nachio... said

    Hola, primero que nada lo implemente yo al truco, y soy Nachio, Bienvenido.

    Bien, tienes que unir los <>, para eso debes implantar este código y automáticamente se varia el ancho.

    <form action=’/search’ id=’searchthis’ method=’get’ style=’display:inline;’><input id=’search-box’ name=’q’ onblur=’if (this.value == "") this.value = "Buscar en el Blog";’ onfocus=’if (this.value == "Buscar en el Blog") this.value = "";’ type=’text’ value=’Buscar en el Blog’/><input alt=’Buscar’ border=’0′ src=’http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Crystal_Clear_app_xmag.png/32px-Crystal_Clear_app_xmag.png’ type=’image’/></form>

    Por supuesto, puedes cambiar la dirección URL de la imágen a tu gusto.

    ¡SALUDOS!

  3. OctaviZ™ said

    hola que tal,como se alinea a la derecha? no le veo el que

  4. Juan Manuel Valentini said

    Graicas por tu blog! es de gran ayuda para mí que me estoy iniciando. Quería preguntarte si podría cambiar la imagen de arriba porque desentona. te dejo mi mail: jmvalentini@hotmail.com

  5. matias mangiantini said

    gracias por los trucos me estan sirviendo en mi blog. si quieres visita mi blog http://mixinteresantes.blogspot.com/

  6. Axiarel Sobernek said

    gracias por este truco, estaba buscando algo asi de simple que mejorase mi blog, un saludo!!

  7. PerSe said

    excelente tip!!!!!!!!!!!!!!!!!!

  8. Claudio Gonzalez said

    Impecable, fecilitaciones !! Acabo de instalar el buscador y funciona de mil maravillas. Exelente blog, a proposito, inscribi tu feed en mi google reader, asi que voy seguir tu actualizaciones mas de cerca !! Chao

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: