David Cumps - Contents tagged with .Text

Adding Search to my Blog

Tuesday, January 11, 2005

.Text Tweaks

14 Comments

Important Notice:
If you want to add this to your blog, read:
http://www.google.com/services/terms_free.html
http://www.google.com/stickers.html
http://www.google.com/permissions/guidelines.html

As noted in the comments to this post, the code below violates their agreement. You can fix this by putting a Google logo of the stickers site next to your search, you can't modify the logo! If you use a search, you can only put Google on your site, not together with MSN.

If you do all of this, you're fine. Now you have three choices:
1. You don't care and use it like this in minmalistic form, some say your site will be removed from Google when doing so.
2. You make the changes I just said, and everything is fine, it just doesn't look that much finished anymore :)
3. You remove it all together. (my choice)
The choice is yours, never complain to me if Google removes your site :p

Now back to the post.

After reading Heather's post about searching and taking a look at Geoff Appleby's JavaScript function I decided to add a Search box to my blog as well.

Here's a step by step explanation on how to add it:

Go to your blog's Admin section.
Go to Options.
Go to Configure.

Add the following to 'Static News/Announcement':

1<h3>Search</h3> 
2<input class="BlogSearch" type="text" name="searchBox" id="blogSearchText" value="" onkeypress="return blogSearch(event, this);"> 
3<input type="button" value="Search" onclick="return blogSearch2('blogSearchText');" class="BlogSearchButton"> 
4<script type="text/javascript"> 
5 
6function blogSearch(event, oInput) { 
7 var keyCode = (event) ? event.keyCode : keyStroke.which;
8 if (keyCode == 13) { 
9    top.location = 'http://www.google.be/search?q=' + escape(oInput.value) + '+inurl%3Acumpsd+site%3Aweblogs.asp.net'; 
10    return false; 
11 } return true; 
12} 
13 
14function blogSearch2(oInputId) { 
15 var oInput = document.getElementById(oInputId); 
16 top.location = 'http://www.google.be/search?q=' + escape(oInput.value) + '+inurl%3Acumpsd+site%3Aweblogs.asp.net'; 
17 return false; 
18} 
19</script>

Replace cumpsd with your blog url.
Save.
Admire your new search.

If you want to use MSN as a search engine use the following code (and replace cumpsd with your own url):

1<h3>Search</h3> 
2<input class="BlogSearch" type="text" name="searchBox" id="blogSearchTextMSN" value="" onkeypress="return blogSearchMSN(event, this);"> 
3<input type="button" value="Search" onclick="return blogSearchMSN2('blogSearchTextMSN');" class="BlogSearchButton"> 
4<script type="text/javascript"> 
5 
6function blogSearchMSN(event, oInput) { 
7 var keyCode = (event) ? event.keyCode : keyStroke.which; 
8 if (keyCode == 13) { 
9    top.location = 'http://search.msn.com/advresults.aspx?q=' + escape(oInput.value) + '%20cumpsd&FORM=SMCA&adv_f=all&adv_dom=weblogs.asp.net&adv_depth=&adv_dt=html&adv_dt=pdf&adv_dt=ppt&adv_dt=msword&adv_dt=x'; 
10    return false; 
11 } return true; 
12} 
13 
14function blogSearchMSN2(oInputId) { 
15 var oInput = document.getElementById(oInputId); 
16 top.location = 'http://search.msn.com/advresults.aspx?q=' + escape(oInput.value) + '%20cumpsd&FORM=SMCA&adv_f=all&adv_dom=weblogs.asp.net&adv_depth=&adv_dt=html&adv_dt=pdf&adv_dt=ppt&adv_dt=msword&adv_dt=x'; 
17 return false; 
18} 
19</script>

Update: Fixed script to work with Firefox as well (removed window.navigate and fixed event parameter and keyCode)
Update2: Added escape(), MSN version and site: restriction
Update3: Fixed MSN version, had a typo in the function name and id
Update4: Added important notice about Google terms. (This does mean I have informed you of it and you don't have to comment here about legal issues...)