|
|
How can I add a Google search box to my Web site?Dave, I keep visiting sites and seeing these cool search boxes that let you either search their entire site or search the entire Google database, all without leaving that page! I want to have something like this and would appreciate your helping me figure out the code needed.
This is a question that's going to result in some HTML listings. You know that, so there's no reason to panic! First off, the good news. Google itself actually has a nice page offering you HTML code you can just cut and paste onto your own Web pages to produce the search box you seek, and some variants beside. Just check out Google Free. Instead of relying on the bright sparks at Google, though, let's go through the steps of building our own search box instead, so you'll be able to see how it works. Also, not to pick on Google because I think the world of those folk, but their HTML samples could be cleaned up a bit, usually, so I've also recast it as proper XHTML rather than somewhat sloppy HTML. Just don't tell Larry and Sergey, okay? The basic technique involved here is to be able to manipulate one of the variables handed to the Google search engine, a variable called sitesearch. Set it to a null value and you're searching the entire World Wide Web, but set it to a specific domain and it's constrained exactly as if you had typed in the Google special notation site:domain. In addition to that, you need an input field and a submit button. Put them all together and here's the minimalist Google search form that lets the user alternate between just your site (well, in this case just my site) or the entire Web: <form method="get" action="http://www.google.com/search"> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /> <input type="radio" name="sitesearch" value="" /> The Web <input type="radio" name="sitesearch" value="askdavetaylor.com" checked /> Ask Dave Taylor<br /> </form>There are some additional tweaks we can apply to make it a bit more fancy, including changing the radio buttons to a single check box, and aligning things a bit more nicely using a table and some simple CSS: <form method="get" action="http://www.google.com/search"> <div style="border:1px solid black;padding:4px;width:20em;"> <table border="0" cellpadding="0"> <tr><td> <input type="text" name="q" size="25" maxlength="255" value="" /> <input type="submit" value="Google Search" /></td></tr> <tr><td align="center" style="font-size:75%"> <input type="checkbox" name="sitesearch" value="askdavetaylor.com" checked /> only search Ask Dave Taylor<br /> </td></tr></table> </div> </form>Here's how that renders when included on an HTML page: If you'd like to use this on your own site, simply change the occurrences of askdavetaylor.com as appropriate. Not too hard at all!
Related HTML, JavaScript and Web Site Programming articles:
✔ How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....
✔ Can I embed a Facebook search box on my blog site?I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...
✔ Can I use CSS for drop shadows on my blog?I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....
✔ How can I embed interactive photo panoramas on my site/blog?I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...
✔ How can I create a Twitter search URL shortcut?I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
Categorized:
HTML, JavaScript and Web Site Programming
(Article 3802,
Written by Dave Taylor)
Tagged: Previous: Selling jewelry on eBay, does it need to be appraised? Next: Should students use Google for research? Reader Comments To Date: 817Tammy said, on March 14, 2011 7:07 AM:
Hi Dave, Here is my partial code: input type="hidden" name="q" size="25" maxlength="255" value="" I hope this makes sense. Can you or someone here please tell me what I am doing wrong? Nic said, on March 14, 2011 9:42 AM:
An answer to a questio that was asked in 2006 became useful to me in 2011. please Dave dont delete old posts Tammy said, on March 14, 2011 7:04 PM:
Hi, Here is my HTML code (opening/closing brackets removed so it would post on here): form method="get" action="http://www.google.com/search" id="form" I hope this helps someone. Thanks to everyone that posted on here. I learned something! edelyn cabalhin said, on March 15, 2011 4:48 PM:
Perfect! It is really great to have a google search box on my site. I can no longer as for more. Thanks and please keep me posted for some updates on this. :) Karan Kapoor said, on March 18, 2011 12:40 AM:
Hi! Dave please tell me ,how we can link application softwares like ms paint in html sites martin said, on March 18, 2011 1:49 PM:
Hi, At the side of my website i had my address, phone number etc. for some reason these have gone, can you shine any light on this issue for me as i am at a loss, Jason Anderson said, on March 19, 2011 1:38 AM:
Very helpful! Thank you! I even managed to adjust the size without screwing up my website! Thanks! Akhtar said, on March 23, 2011 10:14 AM:
How can i display the search results(from the above code) on to my own(self designed) page, while as the above code redirects us to the google's page and then results are displayed there. thanks Andrey said, on March 24, 2011 4:31 AM:
It is certainly a wonderful way to add search function to the site, but how Google itself (with its "Google custom search" http://www.google.com/cse/ ) will treat sites with this kind of unofficial use of google search engine ? Thank you Andrey said, on March 24, 2011 4:39 AM:
I just wants to know - is there is any risk in use of this google searchbox for free, while google selling this function. Andrey said, on March 24, 2011 4:42 AM:
One more thing - previous question was applied for the commercial site Tammy said, on March 24, 2011 8:58 AM:
As I said, I am new at this so, if there is something wrong with my code (illegally), please let me know. Dave or someone who knows absolutely for sure? aroma said, on March 29, 2011 6:44 AM:
hi dave how would i change the position of the search bar for example mine is appearing on the top left and i would like it on the top right gameruler said, on April 1, 2011 2:20 PM:
I'll try this soon. thanks magnus said, on April 1, 2011 6:26 PM:
I design a website. it centred well when you browse with internet explorer, but with firefox it is left aligned. i do i make it centre in firefos as well. also the scsript work well with I.E. but not with firefox BillieKate said, on April 2, 2011 12:42 AM:
Thanks Dave. You are a genius, but I am sure others have already told you this. Keep up the good work. It is much appreciated. Shah Riaz said, on April 6, 2011 11:41 PM:
Hi, Your goggle search Code is very excellent work.Thank u so much.It`s very helpful me. Rat said, on April 9, 2011 4:44 AM:
Hey Dave, Good stuff. Is this method legal to use on any site? -Rat one said, on April 11, 2011 11:52 AM:
my website is in hebrew (windows-1255), and whenever I use the code, google gives me weird characters instead of hebrew. all I get now is question marks. how do I get it to work? one said, on April 11, 2011 11:55 AM:
that code that isn't displayed is David said, on April 13, 2011 9:45 PM:
Hey Dave, or anyone else that might be able to help. I currently have google's Custom search engine on my site. As you know, it doesn't allow you to search images. I have created an undefined list that links to google images on the same page of my search results. When the user clicks on the link it does take them to google images but they have to retype what they were searching for. Is there a way to make it so that when the user clicks images on the results page it links them to google images with the search term already submitted? John said, on April 15, 2011 3:50 PM:
How can I minimise the box so the check box isn't shown? saman said, on April 21, 2011 11:22 AM:
thanks.thanks Scott said, on April 24, 2011 9:32 AM:
Hey Dave, My Google search bar works perfectly in Internet Explorer 8, but in IE9 the toolbar gets pushed way off to the right and only half of it displays. I tried aligning left and other tricks, but nothing works. Any ideas? Krishnamoorthy said, on April 28, 2011 4:01 AM:
I need to pass the image keyword to google and after that I need to get the image result im my page. Not in google page Rak Amagra said, on May 5, 2011 6:40 AM:
I treid to pass on the image keyword to google but somehow i dont get result in image google search. For the toolbar i use IE 8 i had trouble with the IE9 and Firefox. Sharon W said, on May 5, 2011 8:47 AM:
Thanks Dave, it work like a charm. Shay said, on May 5, 2011 10:55 PM:
Thanks Dave, just what I needed, it works beautifully. wasm said, on May 8, 2011 11:33 AM:
mmm i have a question , i didn't understand what you mention , i want you to write it step by step .From the first step to the end because i'm an novice and i don't know how to do it >< gk said, on May 16, 2011 5:25 AM:
Hi Dave , I have similar kind of question. 1- i want to load google results in my website without even moving away from my webpage. 2 after the google results if some one click on that results it should not move to other page i wan it to load in the same page .. eg. step 1 am in xyz.com header should always remain same ie xyz.com but results from google ... pls give with code example.. ramasamy k said, on May 16, 2011 6:08 AM:
Is there any way to display google search result in my web page and the link if it is clicked it should not go out of my site. kapil said, on May 21, 2011 4:20 AM:
hi dave taylor,, Puma at Best Photos said, on May 22, 2011 1:07 AM:
Thanks for the tip Dave! I have been thinking about it for a while and now I can follow your instructions to set it up. Reodd said, on May 23, 2011 3:54 AM:
Dave Michael Jetter said, on May 25, 2011 9:02 AM:
thanks Dave for your topic, it really avoids me useless web researches which, i am sure, would have led me to a dead end David Greensmith said, on May 25, 2011 9:10 AM:
This is just what I was looking for! Seems pretty simple, I will give it a go! Many Thanks Syamdersh said, on May 25, 2011 10:55 PM:
Thanks Dave But how can i show the search results in various formats rather than the usual way jefe said, on May 30, 2011 4:25 AM:
Good information thanks for posting. Awais said, on June 1, 2011 7:58 AM:
Thanks for nice info... i can add now google box T. Verkauf said, on June 8, 2011 5:40 AM:
i added the google box already and it works perfectly thx for that :) Clyde said, on June 20, 2011 2:38 PM:
Hi Dave, Clyde Dave Taylor said, on June 20, 2011 11:07 PM:
Clyde, you need to cut and paste the HTML code *exactly as shown* into an HTML page. Adding it to your CSS definitely doesn't work (as you have learned). If you're running Wordpress, you should be able to paste it into your template... Arpit Chopra said, on June 22, 2011 6:10 AM:
Thanks for your Search Query Emmie said, on June 24, 2011 7:06 AM:
Thank you Dave, popped this on my site and works a treat! Simple and actually works. Mike said, on June 27, 2011 10:51 AM:
Hi Dave, brilliant, simple and easy to implement. Thanks for the headsup on this. Mike Jason said, on June 29, 2011 9:22 PM:
Thanks, searched for how to add Google to my site, and Google let me down, in that it didn't pop up a google.com link explaining how to, but your site was on the listings, and it worked. irfan said, on July 5, 2011 7:44 AM:
1-how can i add videos on my web site? 2-how can i search my web site on google Nadeeja said, on July 6, 2011 5:31 AM:
Dear Dave Gcampton said, on July 9, 2011 8:38 AM:
Holy cow, so many silly questions. This is why I do not provide info on how to do stuff. I was considering doing programming tutorials on my programming forums but thankfully I thought twice about it. Well, if I was rich I'd donate just cause' I feel sorry for ya. And for all you useless people who don't actually know how to use google, yet you want a google search bar.... try going to "google.com" and typing "how can google see my site?" First 4 links you get are relevant webmaster links to google.com where everything is explained. 5th link is dave's. ...and if your reading this do the right thing and donate money if you want to waste his time. He's been answering your same dumbass questions time and time again for the last 5-6 years. Oh and before someone all high and mighty says "oh yeah well your here too" go google "object oriented programming and code reuse" Thanks again mate, and goodluck. Oliver said, on July 9, 2011 11:09 AM:
I just discover your web site today... It´s amazing Only one question: is it possible to hide the check box and its text? Bristol said, on July 9, 2011 3:09 PM:
Dave, just what I was searching for and it runs a treat! As always, many many thanks. Zahid \ said, on July 10, 2011 12:30 AM:
Thanks for this code ameerali badeghar said, on July 10, 2011 3:59 AM:
i want web url konteyner said, on July 12, 2011 8:47 AM:
Vanuatu has been inhabited for centuries and these species are known to the locals. These are not "new species" at all, they are simply species that european paradigm trained so-called scientists had not seen before. izrada said, on July 14, 2011 4:51 PM:
Great tutorial, simple and precise. Thanks for sharing Frank Amristar said, on July 14, 2011 5:41 PM:
Adding the google serch box to the web site, save lots of time for search,Thanks Dave Mandi said, on July 16, 2011 12:36 PM:
hey, so i'm using a table and some iframes. i used this code and it's working great... but could i use a target tag like you were saying earlier and have the search pop up in the iframe where everything else is linked? i tried doing that, but its not working... any suggestions? Mikael said, on July 19, 2011 3:10 AM:
Hi Dave I have a question regarding whether or not it is possible to limit the search of the Google-search-box. I.e.: if I type "42" into the search box I only want results from a specific subpage and all its subpages. If this is not possible do you know if it is possible with this solution: http://subpage.mainpage.com? Any ideas? Achyut Neupane said, on July 20, 2011 2:07 AM:
hello!!! Kimm said, on July 28, 2011 1:15 PM:
Works Perfectly! Vhambee said, on August 3, 2011 6:51 AM:
Hi Dave! After searching for a google search box in the web, i came across the google custom search, but when i used the code, i wasn't satisfied! So i did a search again & found your site which i was skeptical at first, but after trying it, OMG! it works perfectly just as i wanted it to be! & since i want to modify it, i would like to ask you some questions, but after reading all these comments, i guess all my questions are answered!! What else can i say....... but a big THANK YOU!!! BigVern said, on August 3, 2011 10:40 AM:
Hi. Firstly Dave thanks for posting this great bit of code. One question I have. Having looked at the Google java based code for adding search to a site, is it possible to link the search code you have put above with an adsense account in the same way... i.e. to earn revenue from people using the search box, clicking ads etc? Bigvern said, on August 3, 2011 10:40 AM:
Hi. Firstly Dave thanks for posting this great bit of code. One question I have. Having looked at the Google java based code for adding search to a site, is it possible to link the search code you have put above with an adsense account in the same way... i.e. to earn revenue from peopole using the search box, clicking ads etc? Dave Taylor said, on August 3, 2011 5:07 PM:
BigVern, yes, if you log in to your AdSense account, you'll find that Google has a search system designed to hook into your AdSense account. I haven't tried it (I use http://www.lijit.com/ here instead) but it's pretty straightforward... web-ed said, on August 3, 2011 6:19 PM:
Thanks Dave - it worked like a charm! Abdul Degri said, on August 10, 2011 10:38 AM:
please guyz, help out. how can i add html on google account? please help me out Opher said, on August 10, 2011 12:30 PM:
hi dave - thanks for this great code. question/problem - i used the search code for a while and it works great (the code was placed at the website's "header" section). recently, i've added a "contact" feature which also use a method and when it's placed at a lower "section/content" part of the page, that 2nd form always execute the "search" function rather than the "contact" function - does it make sense what i'm trying to say? here is the 1st / search command form method="get" action="http://www.google.com/search" target="_blank" and here is the 2nd / contact command form name="contactformlite" method="post" action="lite_process.php" onSubmit="return validate.check(this)" which end up executing the 1st / search function rather than its own. is there a way to make each command executing its own function? thanks for your help... Opher said, on August 10, 2011 1:03 PM:
FORM ACTION="" johnbenedict said, on August 11, 2011 11:16 PM:
ahhm.. can i ask a question? is it the same code if i'm creating a site like wikipedia? thanks. Dea said, on August 14, 2011 11:36 PM:
Thanks man! The search box works. I have successfully added it to my website. Again, thank you Patrick said, on August 16, 2011 3:18 PM:
Thanks Dave! I was wondering if the code could be edited to show search results in a new (non google hosted) same site page. Say I have the search field on my home page (sample.com) and want the results to appear on my search page (sample.com/results) instead of a google hosted page. Is this a possibility? If so, please let me know what code to add/revise to accomplish this. THX Pak Youngers said, on September 2, 2011 1:11 PM:
I use and customize too much. Can you tell me anything that search the entire web but shows results within my webpage? Baljeet Singh said, on September 3, 2011 12:40 AM:
It's very important for me. I don't understand what is the meaning of "q" in the google search code. and also what is the difference between "id" and "class"? Both seems alike to me. Please Dave, I need ur help!! Dave Taylor said, on September 3, 2011 7:15 AM:
Baljeet, the 'q' is the name of the variable sent to the Google search server that contains the value of the search term. In other words, if I search for "chicken", then the variable 'q' will have the value "chicken", as in: q=chicken In terms of ID and CLASS, those are to do with Cascading Style Sheets (CSS) and are a different topic entirely. Lots of stuff online explaining the difference between the two if you look. Chris said, on September 4, 2011 10:30 AM:
It works great, thank you Dave ;) However, it would be grand if the search results popped up in my own blog instead of google page. I've been reading for the last 5 hours on all kinds of info and guides and tutorials on how to setup your own search box. I have a blog and didn't like the navbar so I have it hidden. Tried a lot of html boxes and they work, but they only show the newest posts. If the post is a month old the search box won't find it. Yours however does xD Now, if there was a way to make the results appear on my blog instead of Google, then I'd be a happy puppy :P p.s The search box blogger widget from google doesn't work at all either, I get 0 results everytime I use it Baljeet Singh said, on September 4, 2011 12:12 PM:
Thank You very very much Dave........ Hiren jadav said, on September 5, 2011 8:32 AM:
Hi dave dil lama said, on September 7, 2011 9:22 PM:
I want to see my web site first page in the google. dil lama said, on September 7, 2011 9:26 PM:
Hi Dave, I want see my web site first page in the google of all over the world. please help me and show my web site for everybody first page in the google. resim said, on September 8, 2011 3:58 AM:
Thanks you very much, wonderful! Garry Mirken said, on September 8, 2011 1:37 PM:
Thank you Dave, it works perfect :) Garry. Baljeet Singh said, on September 10, 2011 10:25 AM:
Hello Dave.... Will Carter said, on September 13, 2011 12:10 PM:
I will be putting a search box on our website soon - thanks alot Dave Duncan said, on September 14, 2011 6:34 AM:
Hello, is there a way of making the results appear on a results page in my own site, in a place of my choosing?! Thanks! tanay said, on September 14, 2011 7:24 AM:
Hello dave,a great post! By the way I wanted to ask you that: I want to incorporate a search engine in my website, but I want the search results from the specific websites predefined in my database.How can that be done ? http://www.ncbi.nlm.nih.gov/pubmed/ Check the above link..I want to create a search on similar lines. Please help me.. m.saqib said, on September 25, 2011 1:49 AM:
thnks 4 this act but this search box appear on left side i want it appear on right, have you any html code?? kalpana said, on September 28, 2011 11:20 AM:
THANKS DAVE for your valuable answers.Here is my question. Umashankar said, on September 30, 2011 9:10 AM:
thanx for the tip Sheila said, on October 1, 2011 12:13 AM:
Hi Dave, I notice when searching your site that your picture appears beside each result - how can we do the same thing? Thanks! Sheila Dave Taylor said, on October 1, 2011 12:37 AM:
You bet! Read this article: http://www.askdavetaylor.com/how_to_implement_add_relauthor_google_serps.html kevin said, on October 2, 2011 5:37 PM:
Dave, kevin shahab uddin said, on October 3, 2011 9:03 AM:
Thank you very much for your kind information. Sheila said, on October 3, 2011 3:23 PM:
Thanks Dave, I appreciate your responding so quickly. Jan said, on October 18, 2011 12:51 PM:
The site is written in frames, can't change that unfortunatly af i'm not the only one working on the site. But here's my question: Dave Taylor said, on October 18, 2011 8:30 PM:
The trick, Jan, is to give each frame its own unique name, then you can use "target=name" to point the results of a click to a specific pane of the design. Make sense? Seema said, on October 19, 2011 8:55 AM:
Thanks for suggestion.........i want to add google search in my home page........plz provide me help......... Cody Wahl said, on October 20, 2011 8:45 AM:
Hi, I'm a high school student in a Web Design class and my assignment was to try to figure out how to put a search bar that searches only our high school web page which we are redesigning as a group. Me and my teacher are learning as we go because we are always trying out new elements. I'm a novice so i'm doing a lot of research to try and get one that works but information is hard to find that i can actually use because i only know html and css. I tried using your code from above but when i tried using a keyword i couldn't figure out how to get the search to recognize the page. i need a lot of help! I really would appreciate your help, thanks for your time Abe Ekbatani said, on October 20, 2011 3:26 PM:
Hello Dave. A nice article, and plenty of comments. I would like to make a point about your 'Search Box'. Otherwise, the code won't pass 'W3C Markup Validation' test. Cheers. Winston Ferguson said, on October 23, 2011 12:35 PM:
I want to join this plus other websites and I would like to use the same email addressandpassword for a
I do have a comment, now that you mention it!Check This Out Too... |
Recent Entries
Look for Answers
Recommended
All Our Categories
Apple iPad Help
Articles and Reviews Auctions and Online Shopping Blogs and Blogging Building Web Site Traffic Business and Management Computer and Internet Basics d) None of the Above Facebook Help Google Gmail Help Google Plus Help HTML, JavaScript and Web Site Programming Industry News and Trade Shows iPhone and Cell Phone Help iPod, Sony PSP and MP3 Player Help Kindle Fire Help Mac OS X Help Pay Per Click (PPC) Advertising Pinterest Help Search Engine Optimization (SEO) Shell Script Programming Tech Support Video Help The Writing Business Twitter, LinkedIn and Social Network Help Unix and Linux Help Video Game Tips and Help Windows PC Help Find Me on Google+ ADT on G+ |
Dave, when I put the Google search code on the Master Page it redirects me to the google site but with no search results. However, if i use a page that does not use the Master page it works properly. Can you please advice? Thank you.