May 9, 2006
9.5.06 | Posted by
Aditya
The idea for this stemmed from a little experiment that I was trying to conduct
about a month back. The experiment dissolved, but this was born out of all the knowledge that I gained from it. Trying to not to sound like a TV commercial, it is slightly painful when one searches and it opens up a seperate Google page full of your results. You need to make tons of click to return to where you were, and
conduct the search in a new page. Plus, those Google search pages don't look that good either. So, I present to you, Blogger Native Blog Search.
This hack aim's to solve the problem of displaying searches in one's own page rather than go to a Google search results page. You can see it in action on the right,
right above my profile picture. Put in a word, and it will search this blog for it and display it right underneath. Wanna implement it? Good! Let's show you how! :)
Put this bit of code in your template's <head> area:
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++;
}
}
}
Notice, that I have used the container tag named text to show the results. You can change it to anything for your usability comfort. Now, put the following bit of
code wherever you want to put the form to make the search. It goes in your body area:
<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>
This part is the container which will hold the results from the search performed, followed by close button to close the search results.
<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>
There you have it! Now you have native blog search. The JSON feed is courtesy of John Resig's fantastic rss2JSON converter. Ofcourse, if that goes down, so does this script. But that shouldn't go down, so you're safe! :) If you use this code as-is, make sure there aren't any other elements with the id as
If there is no search result, an alert popup will tell you that there aren't any.
There are many implications of this hack. The main one of them being that this'll keep the Google Ads at bay. Since you don't go to a Google results page, you don't see any ads. I don't know how good that is for Google, but well, there's a downside to everything! :P This hack is by no means complete, so people who want to add to this are more than welcome. Just leave a comment and tell me that you've updated it, so that I can link to you! :)
As usual, if you have any trouble implementing this, please comment and let me know. I'll try to help you out to the best of abilities. Enjoy!
about a month back. The experiment dissolved, but this was born out of all the knowledge that I gained from it. Trying to not to sound like a TV commercial, it is slightly painful when one searches and it opens up a seperate Google page full of your results. You need to make tons of click to return to where you were, and
conduct the search in a new page. Plus, those Google search pages don't look that good either. So, I present to you, Blogger Native Blog Search.
This hack aim's to solve the problem of displaying searches in one's own page rather than go to a Google search results page. You can see it in action on the right,
right above my profile picture. Put in a word, and it will search this blog for it and display it right underneath. Wanna implement it? Good! Let's show you how! :)
Put this bit of code in your template's <head> area:
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++;
}
}
}
Notice, that I have used the container tag named text to show the results. You can change it to anything for your usability comfort. Now, put the following bit of
code wherever you want to put the form to make the search. It goes in your body area:
<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>
This part is the container which will hold the results from the search performed, followed by close button to close the search results.
<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>
There you have it! Now you have native blog search. The JSON feed is courtesy of John Resig's fantastic rss2JSON converter. Ofcourse, if that goes down, so does this script. But that shouldn't go down, so you're safe! :) If you use this code as-is, make sure there aren't any other elements with the id as
text. It'll interfere with this. If you change the id in one place of the code, you'll have to change it everywhere. If there is no search result, an alert popup will tell you that there aren't any.
There are many implications of this hack. The main one of them being that this'll keep the Google Ads at bay. Since you don't go to a Google results page, you don't see any ads. I don't know how good that is for Google, but well, there's a downside to everything! :P This hack is by no means complete, so people who want to add to this are more than welcome. Just leave a comment and tell me that you've updated it, so that I can link to you! :)
As usual, if you have any trouble implementing this, please comment and let me know. I'll try to help you out to the best of abilities. Enjoy!
Subscribe
Posts
Comments
9 comments:
It looks nice and saves a whole pageview. It only costs a sidebar :) I bet it can be even faster as this. Still it's good prove of concept.
@Gaby de Wilde: It looks nice and saves a whole pageview. It only costs a sidebar :) I bet it can be even faster as this. Still it's good prove of concept.
heh, yes, it is quite the hack, i will look more into this on my own take but aditya worked on this from a week prior to Bloggeratto going online and after i got to saw the first implentation of the hack, i can say that it sure is the best there is. no more need of using freefind in a iframe post anymore!!!
there is somthing wrong with the js on this blog. Turn on the javascript console in firefox. I get errors as if the comment is part of the script.(that cant be safe)
I've tried avoiding blogger js creating variables with quotation marks by reading the value from the html.
I mean, we do need quotes in our post titles?
Good luck :-)
Hey gabs! Thanks for the headsup, but I tried to fix it as much as I could. For the extremely nitpicky ones, I'll just edit the comments manually so that they all have single quote's substituted for doubles. Not too much effort, and keeps it running smooth!
As for the hack! Thank you! I'm sticking to Google for the sole reason that their searches are oh! so accurate! I tried Yahoo! It was faster, yes, but very inaccurate! So, wait for a second more, but you'll be given much better results!
good template but it takes time to load from my place.
you have a good idea, i think you must regulary update this blog.
a post a day is minimum
@Gaby de Wilde: there is somthing wrong with the js on this blog. Turn on the javascript console in firefox. I get errors as if the comment is part of the script.(that cant be safe)
I've tried avoiding blogger js creating variables with quotation marks by reading the value from the html.
I mean, we do need quotes in our post titles?
Good luck :-)
I know the blog need some debugging but this will be sorted out soon.
@hedgehogman: good template but it takes time to load from my place.
you have a good idea, i think you must regulary update this blog.
a post a day is minimum
Yeah, there i no excuses but i do Blame The E3 as the main distraction... i am a hardcore console gamer.
Hello,
I like to have your search widget, but I was stuck at the very first step when I pasted the code. I got an error mesage:
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "ui" must end with the ';' delimiter."
What have I done wrong? Thank you.
use & where there is &
Post a Comment
Welcome To Bloggeratto. In here you can post any kind of comment you want. Seriously, Go ahead.