Adding Google Text Search Utility with Custom Tab Results

Please click on the title to go to the archived page.


Vivek Sanghi said...

Excellent. Looks gr8! Can't wait to put this one in my blog.

S.Phoenix said...

First off all i will have to thank you a lot because of your mentions. I didn't deserve you to mention me at your fantastic blog. (This is the first point).
The second one, is that i will prepare a translation of this topic of yours and try to make it easy for brazilians to do it.
The third point is that i will see with Mark how to merge it (the Google Search AJAX API) with adsense.

Thanks a lot ;)

Brainiac said...

fantastic, fantastic! very, very good! but in sidebars with less wide it does not go, recharges the page continuously. Can be made option button to choose search normal (entered complete with format) and this mega search? Single sample 1 page of results?

Hoctro said...

@Phoenix: If it weren't for your request I wouldn't post this new one. You know I don't post a new one just for the heck of it.
@brainiac: I'm not sure what you're talking about! Can you be more specific, or point me to the problem you're having on your blog or blog test?

Hoctro said...

Thanks! Vivek!

al ghoul said...

congrats on the new look!

Vivek Sanghi said...

Hello Hoctro. I had a suggestion for this hack. As this hack has been created by you for blogger beta, why don't you add a credit link-back to your site under the search box. If you see my blog. I have this search bar right over my post section and want my readers to know that it comes from your blog. Whenever, I install a hack from any blog, I feel like writing a post about it (linking back to that blog) but it is not possible always. Hence a credit link takes care of the link-love. What do you think?

S.Phoenix said...


How can i post a code in the Blogger Beta? When i wright the code it desapears...
Do you know if there is a tag [code] or something like that for me to be able to post your codes on the tutorial to Brazilians (based on yours)?

Best Regards,


Hoctro said...

@Vivek: I'll keep that in mind. For the next hacks I'll probably put that in a line, tell the user about that, and have him or her the freedom of including the credit line or not. Imagine a person whom likes my work so much, he/she installs 10 of my hacks, it's gonna look weird on his sidebar, don't you think? :)


Hoctro said...


this is how I prepare for a typical tutorial:

1. Code it up.

2. Cut and paste the finished template into Notepad.

3. Do a "replace" command, replacing 3 things:

* "<" replaced by "& l t ;" (one word, that's code for less than value)

* ">" replaced by "& g t ;" (one word, that's code for greater than value)

* hit "spacebar" one in the "from" box, then key in "& n b s p ;" (one word for non-breaking space.)

4. Now comes the hard part. Since "<" is replaced by "& l t ;" You will see the article as "<" . But if your user will cut the code from your article it won't work because Blogger stores data as xmls, and a single "<" will mess up the system. To overcome this, you have to show your user a less-than sign as "& a m p ; l t ;" (all as one word.) so what he'll see is "& l t ;" . Then Javascript will understand this as the same as the < sign.

It's kinda complicated. I don't know how to explain more clearer.


S.Phoenix said...

Wow...i don't thought your work was really really hard! :S
I couldn't realise you had all this trouble to help us!
This is what makes your work get more valuable ;)
Well, i have some doubts.

"2. Cut and paste the finished template into Notepad."
In this step, i should put the whole post? Or only the code part?

* "<" replaced by "& l t ;" (one word, that's code for less than value)
After you says about a XML issue. So do i have to replace by "& a m p ; l t ;", instead of "& l t ;" isn't it?

* hit "spacebar" one in the "from" box, then key in "& n b s p ;" (one word for non-breaking space.)

I didn't understand this part.

Besides that, this little tutorial about how to be a Hoctro for One day (Hoctro's difficult life) is really good.

Best Regards,


XiaoFeng said...

Hi,hoctro, how did you adjust the space between the gsp-clear-button and the gsc-search-button? The ajax searchform in my blog( looks a little unnatural as that the gsc-clear-button is too close to the gsc-search-button in IE6.0 or IE7.0 explorer. However, the scene is well in Firefox.

S.Phoenix said...

Hoctro, i put the < without the amp atribute. It seemed to be all right, check it out:

I also got Mark Lucovsky merging it with adsense. You can check it out!

Thanks again for your attention, patience and your hot tips!

I will be here following all news of yours ;)

Best Regards,


Hoctro said...

@Phoenix, please see my latest post.

Cyber-Buff said...

well, 1st of all thanks for a nice hack. but i am seeing the same thing all the time...i mean the error msg. Will the readers always see that?

Nazmie said...

hi hoctro,
thanks for the useful tip on beta hacks.i love your blog place.hehe...
nice...anyway,i got lil' problem about Basic Ajax search utility.when i log in to my blogger account and then go to my page shows (Ajax search apiload failure:invalid api key supplied).but i dont think so i got the invalid key coz i already sign up at
to get a key.and i do as what u instructed in ur nice tutorial beta hack blog.where did i go wrong?do u know about this matter?

Fqb said...

Hello all,
I don't have try this method (but i try it soon). i find you site by "gsc-clear-button" Google results.

For XiaoFeng :
perhaps you can try to add a padding like this:

I made an other example of using this API here :
Google AJAX Search API sur Blogger
I hope this can help someone.

Lovely said...

IF i use this search utility then where do i use adsense ? Can you tell us the benefit of using this utility on blog ?

Best Regards,
Eliena Andrews

Protik Basu said...

thanks for the post..has been a real help:)

Courtney said...

i've been trying for a while to use google's search api on my site but i'm not much of a programmer as i'm only just learning php. I got the basic code from google but i want to personalise it more to fit in with my website and be able to search dif. sections of it, such as pprofiles,photos,blogs,events etc.
Those will be the dif. tabs, can anyone help me?
Thanks in advance.