|
|
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: 817Dillan said, on December 14, 2009 6:08 PM:
I'm still in the process of creating my site with Adobe Dreamweaver and I have the search bar on the site, but I cannot type in the search box when I preview the site or while I'm working on the site. I am extremely new to this and was wondering if I am doing something wrong. I know absolutely nothing about HTML and don't have the time to learn it by the time i need this site finished, which is in a couple weeks. Please Help ASAP. Thank You and God Bless, Z R Abbasi said, on December 17, 2009 12:51 AM:
i want to submit my site on google search engine but unable any body can tell me about it please Mike said, on December 17, 2009 10:11 AM:
I am so glad that I found this website. I wish Google natively had a way to differentiate a site search or search the web with the radio buttons. Thank you so much for showing how to add the radio buttons!! bachchu said, on December 21, 2009 8:41 PM:
Please help me to get more visitor . I have done my website before three or four month ago . I include google search tool box and best link search code. Yet I do not get visitor. my site is complete blog site . Education, Health , and photography tips with other... so please help me to get visitor.. Thanks... Jake said, on December 23, 2009 2:35 PM:
I'm so glad I found this site - I'm working on my gsce project at the moment and little items like this - which not only work first time but have also taught me about it and how to do (I've spent hours searching for a simple tutorial on a search bar!) will help me so much! justin said, on December 23, 2009 4:40 PM:
hey Dave,'i have a free account with google sitesearch. is there anyway that i can put the results on a different page like u have it instead of having it pop up below? ZAFAR said, on December 26, 2009 7:49 AM:
how i add google on my site? Laneo said, on December 30, 2009 6:47 AM:
Hi Dave, Dave Taylor said, on December 30, 2009 8:12 AM:
Laneo, that's an interesting question: can you get Google search hints on a search box that is on your own site? I have never seen anyone accomplish this and have never really dug into how it's done on the Google home page, but my instinct is that no, you can't do it. Perhaps someone else can show otherwise? Zal said, on December 31, 2009 6:51 AM:
Hi. I just want to ask if there is a way to change the google search box just like in this link: http://educational-trafficandeverything.blogspot.com/ Pls reply thanks Dave Taylor said, on December 31, 2009 9:12 AM:
Zal, what am I missing? Just remove the border and drop the search button to below the input box and you have the same search box as that blogspot page? Or are you sneakily trying to get us to visit your blog? :-) sophie said, on January 2, 2010 2:32 PM:
Hi Dave, I am currently creating a website for my Uni semester on Notepad, and I want to add a Google search bar, the code is working fine on IE but when i load it in Firefox nothing displays. This is a problem because it needs to be user compatible. Is it right it just works on IE or have I dont something wrong? Tala said, on January 4, 2010 2:49 AM:
Hi Dave, This is a great article and it is very useful, thank you. I have a question, I would add the results in iframe without the google search box, can I do that? I just saw it in a blog and it is really nice, where our website header and footer still displayed and only google results displayed in the iframe. Thanks in advance for any help Mohan`` said, on January 5, 2010 12:37 AM:
Hi Dave, I was trying so hard so far to find an answere to this but couldn't.. As you may see im and infant to web development and great if you can drop a line to this.
Many Thanks, Khushboo said, on January 6, 2010 3:47 AM:
Hi, I tried to implement the search code in my ASP.Net page that is .aspx page but it didn't worked. --I have put runat="server" with form tag as I am having some more controls on the same page for which I need to have runat="server" with form.I tried posting my code.But this site don't permit that. Please resolve my problem. Steve said, on January 8, 2010 12:45 PM:
Worked like a charm. Thanks a lot for this excellent tip. Sam said, on January 11, 2010 4:52 AM:
Ok so i have put in the code and have added the code to my new site....which is still work in progress www.cheap3d.net problem is when i type something in there it takes me to google without a search result what am i doing wrong? Dave Taylor said, on January 11, 2010 6:50 PM:
Khushboo, it shouldn't matter that your page is a .aspx page, as long as you can create a box of HTML that's not interpreted as ASP. I don't have a clue about that language, though, so I can't offer any suggestions. Sam, look for line breaks within your HTML and make sure that every line that has an open "" all on the same line. That should help! Khushboo said, on January 12, 2010 1:14 AM:
Hi Dave, Thanks for your reply. [form method="get" action="http://www.google.com/search" runat="server"] If I remove runat="server" from the form tag it works fine, but if I put that its stops working, please tell me is there any solution that this code should work with "runat="server" in form tag as well. Thanks.. omar said, on January 12, 2010 7:46 AM:
Hi Dave, I thanks in advanced for helping all of us in fixing our websites. My question, I am using flash cs4 to build my website and i would like to know the code to add yahoo, google and MSN search box in my site. i want those 3 to have their own search box like the little one that comes in the regular website. thanks. leo said, on January 14, 2010 6:29 AM:
Thanks, i found what i forgot about this html code. Now it's clear. Mir Wais Nisar said, on January 15, 2010 7:04 AM:
hello dave, i just want to know how to make a guestbook in classic asp which should work with form tag of html, which could able to put all the comments from form to ms access database Pauline said, on January 16, 2010 2:08 PM:
I am searching for the same question that has been asked, and still I can't find the answer. That is not what he asked, he and I want to know how to put web search and your own site search. Pauline said, on January 16, 2010 2:25 PM:
Sorry Dave, Jenny from Find Someones Email said, on January 21, 2010 5:02 PM:
Thanks for this Dave. I have been coming to your site for ages and I never fail to learn something new. Bobo Benson Kurgan said, on January 22, 2010 8:28 AM:
Its very disgusting to say that i don't know how to connect my website to the google searching engines.......................................... conn said, on January 23, 2010 10:07 PM:
i have it set up but i wont work when i type a keyword in it says it has no results Bill said, on January 24, 2010 11:44 AM:
Hi Dave, I tried to add the "Google search" into my HTML editor (front page), but the only thing that shows up is the HTML code on your site.. I may be adding it to the wrong place in my html...I am not quite sure where in my coding I would paste your code...It is very confusing...I could email you my home page in html, but I am not sure that would be helpful... Any suggestions where to cut and paste your html code?? Before tags? after tags? HELP???!!!! Bill alan said, on January 26, 2010 4:03 PM:
this post has been so helpful, i always wanted to learn how to add google search box in my website and heres the answer, a magnificent post. thanks alot. niraj said, on January 27, 2010 11:00 PM:
thanks friend Ray said, on February 7, 2010 8:46 PM:
I have spent so long trying to figure this one out my self. Thank you so much for making is easy. The code worked perfectly. Ray Ben said, on February 8, 2010 10:35 PM:
I've successfully added Dave Taylor's "How can I add a Google search box to my Web site?" html script to my page. I'm wondering is it possible to do a google custom site search so it does my site and another... Usage Example: Option 1: Search "DELL AUSTRALIA" sourabh thukral said, on February 9, 2010 4:11 AM:
thanks friends for giving me google search engine code in html. michael wolf said, on February 10, 2010 7:35 AM:
Dave, THANKS for the great Google Search box! Problem is after the search is used or the page is The only way to bring it back it to hit refesh? I REALLY want this but my page disappears afterwards? Any Ideas? Thanks Again ! Dina said, on February 10, 2010 8:49 AM:
Hello Dave, thank you. marc said, on February 16, 2010 9:39 AM:
dave, thanks for the code.. was wondering if it can be tweeked to search 'this page only' where the item(s) being searched is/are highlighted on the page. thanks! James said, on February 19, 2010 4:35 AM:
would you know how to make something like this but instead of searching add a comment to my myspace profile? like what i used to post this comment. ? i really want this! Rebecca said, on February 20, 2010 11:45 AM:
Hi Dave, I have acquired a Google page that opens with "test" in the search box and a full page of articles with "test" within them. I have tried to uninstall and even overinstall but now Google does not even appear in my list of programs. Alss, my AOL page is truncated and I can only read a portion of the e-mail description. This happened shortly before I installed Pareto File Cure and tried to install some of the "free" apps it said I needed. It was after this that I got the Google "test" search page. I installed SoftSpy and heretofore, as now, I use a WinSock XP fix which has worked well to keep me clean until now. Please help if you can. Thanks!! Rebecca Marguerite Hamilton said, on February 22, 2010 3:12 PM:
Hi Dave, I really need your help in solving this problem. Google has always updated by website within 1 to 2 days of my making changes or adding content. The last date they crawled my website was February 13th. I made some changes on February 15th and now (no matter how many times I submit my url or use my submitter.net for submissions) no updating is occurring. It seems as though Yahoo and Bing have updated my website and Google has updated other pages in my website EXCEPT for the Home Page. What is happening? I am starting to be concerned. Alo, how do I get Google to use my description rather than other snippets they choose. Sometimes, they just list my categories in the left navigation. If you need my website address, please let me know. I thank you in advance for any help you can give me. Maggie -------------------------------------------------------------------------------- budi said, on February 25, 2010 7:46 PM:
great site. great information this post helped me out alot. Thank you :) harsha prabath said, on February 25, 2010 10:50 PM:
hnpwap free download Oscar D'Antona said, on February 26, 2010 11:00 AM:
I am a total rookie, I have not tested yet .. but thanks a lot just to start with .. Dustin said, on February 28, 2010 4:48 PM:
Very Helpful... thanks! Andy said, on March 3, 2010 6:16 PM:
Dave, I was able to place the google search function on my site however I seem to be having a problem. We need to search in Japanese. It seems that when I type in Japanese text and then hit "search" it defaults to ascii characters and not Japanese characters so the search fails. However, after the failure, if I *then* type in Japanese it works. If I type in English from the get-go it works. I need for it to work in Japanese from the first step and not after it errors-out. Any ideas on what is going on and how I can fix the problem? Junaid said, on March 5, 2010 5:50 AM:
How can I add a Live Date & Time box to my Web site ? Jitendra kumar said, on March 9, 2010 9:33 AM:
please tell me about How i can google add in my site. Sid said, on March 9, 2010 3:26 PM:
Hi Dave, I am creating a comparision site about lease and I am not sure how to get affiliated my websites to other leasing companies so that if someone clicks on their link i get paid and when someone signed up i get commission on it, is this something you can guide me about, please? thanks SaefAllah said, on March 22, 2010 11:04 AM:
I figured out how to search ONLY on my site without giving checkboxes or radio buttons for google, etc. Just remember to change your site where it says ENTERYOURWEBSITEHERE...
Gina said, on March 24, 2010 7:49 AM:
Thank you for the article... I was able to get the search to work, However when the results come up... it seems like the www is missing so when you click on the hyperlink that google returns it fails on load. Can someone tell me what I need to do to fix that ? This site is Https and I am not sure if the full url needs to show? or how to make google show it ? Jasmin said, on March 24, 2010 12:16 PM:
I'm trying to create a mobile portal for myself, and changed the URL to the more PSP-friendly "http://www.google.com/m". Only, once I do that, the site-specific checkboxes stop working. Is there any way to get the checkboxes to work with the the mobile Google site? Wendy said, on March 24, 2010 1:23 PM:
Amazing! Thanks! O. Shashi said, on March 26, 2010 5:16 PM:
hi this helped me to keep in my site so that visitors can search joe richardson said, on March 27, 2010 1:44 PM:
Hi Dave, Thanks for your info. I have used it to provide a site search facility on a site which I maintain. I was very pleased with your information, as implementing a version of your solution actually coincided with Google reindexing my site - I thought for a few minutes that you had wrought some magic, but sadly it was just a coincidence. Thanks again Dave. Joe joe richardson said, on March 28, 2010 2:23 AM:
Hi Dave, I wrote yesterday thanking you for the sitesearch code. On further testing, I am getting something strange happening. When I key the word "apricot" (without the quotes) into the search box in page http://www.stokesleypride.org.uk/html/search.shtml in Firefox I correctly get a single hit; when I do the same in Chrome the same happens; when I do the same in IE8 (8.0.6001.18702) I get "Your search - apricot - did not match any documents". I have cleared the cache in each browser, and the same occurs. I modified your code a little to remove the option of searching the web, and I should say that it is only yesterday that Google indexed the document which is the target of the search (a large word doc). I wonder if you have any ideas as to what I have done wrong? I wonder if I have produced bad XHTML which is being interpreted differently by the 3 browsers. When I do a w3c validate I get only warnings, but relating to the / at the end of the input tag. Regards, Joe Regards, Joe raj vaghela said, on April 1, 2010 12:44 AM:
thanks this is most important for me for add my site.
Jack said, on April 14, 2010 1:50 PM:
Hi, I used the same code. John Price said, on April 24, 2010 12:36 PM:
Hi, A Charity I am involved with has a link to a google search engine, http://google.hostuk.org/ Dave Taylor said, on April 24, 2010 11:14 PM:
John, looks like they're playing some games behind the scene and that they're using Google Search within an iframe or similar, something that lets them have standard AdSense ads on the very top line and the Google search results after. Note that there's no copyright or material at the bottom of their search results pages. My guess is that it's actually a violation of the Google Terms of Service, so I wouldn't be surprised if they were shut down at some point. Ashwani said, on April 25, 2010 12:27 AM:
Hello All, This is very intresting code... i dont wnt to go google page search result ..
tham tu said, on April 28, 2010 10:06 AM:
Thanh you very much. Tham tu Jacob said, on April 29, 2010 3:41 PM:
Is there any way to make the results pop up in a hovering window like the Google Custom Search does? Also, I have tried searching my name, witch is on the home page multiple times, and it did not come up with anything. It also does not come up with the names of my pages. It is an HTML website; how can I fix these problems? Montigny34 said, on April 29, 2010 4:37 PM:
Okay I foudn your website interesting Dave. But like many people have asked, how do I make a "search engine" that searches only my website liek the content of it and stuff like that? You said to people that they needed to install their own search engine? How do I do this? How do I make one? Could you send me links? help? Yes my site is blank, that is because im remaking one from my old one "http://www.ps3-clans.tk" because I prefer my new name. Plz respond A.S.A.P. please thanks Opara Prince said, on April 30, 2010 7:27 AM:
Thank you!!!! very much for this great clue am so delighted to having come in contact with this site. Again Thank you!!!!!!!! Mr.Blogger said, on May 1, 2010 12:09 AM:
its really helpfull and fantastic' D.E.M. said, on May 2, 2010 10:27 AM:
Wow. A lot of these questions are almost hostile! Thanks for the FREE advice on how to easily add a search function to a site. And for the FREE answers to many questions, that you seem to find time to answer....for free. Nate said, on May 6, 2010 1:31 PM:
Dave, The search works great and thanks for the how to. I am wondering if you can tell me how to get the results to show up on a custom results page on my own site. Justin T said, on May 6, 2010 7:21 PM:
Hi Dave, Is there a way to insert text into the search box as an example, "toronto red camera" but when the user clicks to put text in this would vanish so they can put in their own string without having to delete my example of how to search my site. Make any sense? and do you know if this is possible and I know its a long shot. Thanks again you rock! Justin T said, on May 6, 2010 7:39 PM:
Here's the solution to my question above. <input type="text" name="q" size="25" maxlength="255" onfocus="this.value=''" type="text" value="example: toronto red camera" />
hdelpihero said, on May 7, 2010 3:44 AM:
value="bridge.co.uk" checked I do not want the people to have a option if to have a check box or not, i want by default them to search my site with out showing a check box, can you help with a alternate code please. biren said, on May 9, 2010 7:00 AM:
my searchbox didnot work properly and this is not a first time. plz sir help me. Baketi said, on May 14, 2010 1:06 AM:
Dear Dev, i was looking to place same thing on my website and very happy after this my website become a cool website for hang on by youth. thanks a lot The-Marshal said, on May 14, 2010 6:35 AM:
Dear Dave How can make to radio button one search in my site Regards. Shakeeb said, on May 18, 2010 7:04 AM:
Hi, I have followed the steps u hav mentioned above for adding a google search for my "website" on my server, The problem is my website also has the blog i'e www.xyz.com/blog (wordpress), 1. When I enter the keyword its successfully searching the wordpress database but not my website database or the words on my html page, Why so ???????? Thanks, dhaval said, on May 18, 2010 11:00 AM:
hi dave, i am 14 yrs old and have made a web enabled software in asp.net. It works for post transaction recording facility of customers. Now the problem is that my clients have asked me to include a search box in the site and i am not able to figure out how to do it. can u please be kind enough to explain me the steps of adding the search box in a site developed in asp.net ??? I would be very grateful..
Chris F said, on May 20, 2010 10:05 AM:
Dave, George said, on May 23, 2010 2:29 PM:
Hi, Jessica said, on May 24, 2010 11:54 PM:
Hi Dave, I found your website, and it is really helpful for my school project. However, I would like to make the search textbox to be able to search three different websites e.g. Google, Yahoo, and Bing at the same time. Can I possibly do that? Thanks, G.SUDAN said, on May 28, 2010 3:54 AM:
actually i'm creating a website using frontpage. G.SUDAN said, on May 28, 2010 4:01 AM:
Hi Dave. actually i'm creating a website using frontpage. JEETANDER KUMAR said, on May 29, 2010 12:19 AM:
sir, I HAVE HCL WINDOWS7 LAPTOP,I WANT TO GOOGLE MY SEARCH ENGINE/HOME PAGE.WHEN I COME BACK TO SEARCH OR[AT FIRST SEACH TIME MY SCREEN ALWAYS KEEPS WHITE]PLEASE KEEP HERE GOOGLE SEARCH. gazetekolik said, on June 3, 2010 5:57 AM:
its really helpfull and fantastic' mohawkmofelix said, on June 8, 2010 2:19 PM:
Thank you so much, worked marvels! Eli said, on June 11, 2010 7:13 AM:
Thanks Dave! This is pretty cool. brenda said, on June 11, 2010 12:20 PM:
what is coding free web pages for intanets sites? I am trying to list a google blog on a vista print website and want a google adsense. Will this work or not? Thanks for the feedback. BreKay Aman said, on June 17, 2010 10:10 AM:
Thanks buddy for the code... thank you so much.. Bradley said, on June 19, 2010 10:51 PM:
Hello Dave. How could I change the form below to the form for Google Search like yours? Please, I really need assistance with this. I have tried everything to get it just right, by going over your post 1,000 times. Yet, I keep failing. :'( <form action="#" method="post"> Bradley said, on June 19, 2010 10:53 PM:
Well, it did not show the form. :'( Bradley said, on June 19, 2010 11:00 PM:
The code didn't work on my last post. But, your box is too big for the section on my website. How would I fix it to fit that area? DAVID said, on June 22, 2010 9:46 PM:
How do I get the search box to be in the centre of the page. What tags do i add to your code joe said, on June 25, 2010 2:25 PM:
Hi Dave, I like a few times above was curious as to moving the search box to the center or right. I am new to html coding and doing my own site for the first time thanks. منتديات said, on June 26, 2010 5:34 PM:
Hi Dave, I like a few times above was curious as to moving the search box to the center or right. I am new to html coding and doing my own site for the first time thanks. Dave Taylor said, on June 26, 2010 10:10 PM:
There are a couple of ways you can move the search box, actually. first off, if you want to move the input field and button *inside* the box, then add <center> immediately after the <div> tag and </center> immediately before the </div> tag. If it's the entire box, then put the CENTER tags before the DIV and after the /DIV tags, respectively. That are more sophisticated ways to layout elements on a page, but I hope that'll get you folks started... CharlieB said, on June 27, 2010 11:24 AM:
Thanks for the tip and code. I added target="_blank" to so the search results will open in a new window. Guillaume said, on June 28, 2010 2:03 AM:
Hi thank you so much for all your work it is really helpful. [div id="checkbox"] the "/" in the value and "checked" don't validate... it's not a big issue but if there is a way around it that you know of I would really appreciate it. Thanks again Dave Taylor said, on June 28, 2010 7:37 AM:
Not sure about the value= issue -- haven't read the HTML spec recently -- but I can tell you that if you're using the /> notation as I am, you are using XHTML rather than HTML, so make sure that you have specified that in your document header and/or in the validator. nak said, on July 1, 2010 11:26 AM:
a way to make the code work with subdomain ? salman said, on July 2, 2010 5:24 AM:
thanks dave now i add this in to my site. deepak saini said, on July 3, 2010 7:17 PM:
i luv u.....u solve my search problem for about 6 months now i have no problem for search in ma blog....bye and god bless u ...angel Ammar Alsulaimani said, on July 4, 2010 4:42 PM:
can make custom google search in my database..
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+ |
songs