Bloggeratto: Buscador Nativo En Blogger

Esta idea surgio de un pequeño experimento que Aditya esta tratando de efectuar tiempo atras. El experimento se disolvio, pero esto nacio de todo ese conocimiento ganado del mismo.

La idea primordial detras de este hack es que puedas tener un buscador para tu blog sin que al hacerlo otra ventana se tenga que abrir o se tenga que abandonar la pagina principal.

Ademas de que tienes varias cosas extras mas con ello:

1.-Nada de Anuncios
2.-Mejor Look para tu blog
3.-puedes buscar de manera continua sin necesidad de regresarte de pagina.
4.-es completamente configurable
5.-Satisfaccion inmediata.

De esto es lo que se Trata el Buscador Nativo En Blogger.

Ahora pasemos a como ponerlo en el blog.

Primero es necesario poner este codigo en el area <head> de tu templete:

function d_script(para){
var blog="--blog name here--";
var url="http://ejohn.org/apps/rss2json/?url=http://search.blogger.com/
blogsearch_feeds?as_q="+para+"+blogurl:"+blog+".blogspot.com
&ui=blg&ie=utf-8&num=7&output=rss&callback=json"
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}

function json(rss){
var i=0;
if(!rss.entries) alert('No results');
else{
document.getElementById('text').innerHTML="";
while(rss.entries[i]){
var app=document.createElement('a');
var dv=document.createElement('div');
var sp=document.createElement('br');

app.href=rss.entries[i].link;
app.innerHTML=rss.entries[i].title;
app.title=rss.entries[i].title;

dv.innerHTML=rss.entries[i].content;

document.getElementById('text').appendChild(app)
document.getElementById('text').appendChild(dv)
document.getElementById('text').appendChild(sp);
i++;
}
}
}

Es necesario notar que aqui se esta usando un contenedor etiquetado como "text" que es en donde se mostraran los resultados.

Ahora pongan la siguiente forma para hacerlo funcionar, esto debe ir en el area de <body> y preferentemente en alguna de sus barras laterales:

<form action="javascript:var q=document.getElementById('query').value;d_script(q);">
<input type="text" id="query" name="as_q" />
<input class="preview" id="searchbtn" type="submit" value="Search This Blog" onclick="javascript:var q=document.getElementById('query').value;d_script(q);" />
</form>

Por ultimo el contenedor en donde se mostraran los resultados de la busqueda seguido por el boton para cerrarlo el cual pueden poner inmediatamente despues de la forma de accion guardando un solo espacio:

<div id="text" class="titles"></div>
<div id="close" style="display:none;margin-top:5px;margin-bottom:5px;">
<a onclick="javascript:document.getElementById('text').style.display='none';
document.getElementById('close').style.display='none';" style="color:red;font-weight:bold">[X]</a>
<br /></div>

Ahora al buscar una palabra los resultados encontrados seran desplegados inmediatamente debajo de la forma de accion y en caso de no haber ninguno un pop-up te avisara al respecto.

Como siempre si tienen algun problema implementando esto, por favor comenten y haganmelo saber para poder ayudarlos.

Ahora a disfrutar.

Creditos:

Idea, Codigo y Implementacion: Aditya

Posted By Avatar X At 5:02 AM