Archive for October, 2006

It’s Amazing What The Mind Can Do

October 28, 2006

Scott Adams, the author of the popular comic Dilbert, is truly amazing. Check out this post of his. Almost as amazing as Scott’s post, read some of the 1300+ comments he’s received!

Simply amazing.

Advertisements

Rush is Back!

October 16, 2006

See if you can beat the high score!

One of my works in progress is a simple game called Rush25. It used to require Java Web Start, but I’ve completely redone the game using AJAX, CSS, and DHTML. Now it will work in most browsers, without requiring any download. You can find the game in the works in progress section or you can click here.

I’m considering the idea of writing a card games library for Javascript. Is there any demand for this? Let me know in the comments.

Enjoy!

How to Add Google AJAX Search to Your Blogger Beta Blog

October 15, 2006

Do you use Blogger Beta? Do you want to use the coolest new search widget on your site to replace the conventional search? Well look no further! This post will explain how to do just that.

This method will style your search control to be absolutely positioned in the upper right of your site. There are three main steps:

  1. Get a Google Ajax Search API Key.
  2. Create the Search Control.
  3. Style your Search Control.

I will outline each of these steps in more detail below.

Step 1: Get a Google Ajax Search API Key
Click here to visit the Google Ajax Search API signup page. All you need to do is enter your web site’s URL in the box at the bottom, check the box saying that you’ve read and agree with the terms and conditions, and click the “Generate API Key” button. You will receive a key that looks something like this:


Do not close this page! In the next step, you will need the key that you just generated.

Step 2: Create the Search Control
When you are logged into Blogger Beta, go to your blog’s settings. You’ll see three tabs: Posting, Settings, and Template. Click Template. There are 4 subsections under Template: Page Elements, Fonts and Colors, Edit HTML, and Pick New Template. Click Edit HTML. You will see your blog’s template. Scroll almost to the bottom (see screenshot below for help) until you see

<body>
<div id='outer-wrapper'><div id='wrap2'>

Replace <body> with <body onload='OnLoad();'>.

Now add a new line after
<div id='outer-wrapper'><div id='wrap2'>

On that new line, paste this:
<div id='searchcontrol' />

This screenshot shows what it should look like after you’re finished, with the relevant parts circled in red.


Now scroll back to the very top of your template. At right about the 7th line of code in your template, you should see “<head>“. See screenshot below for help. Enter a new blank line after <head>, and then copy and paste the following:


<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>

<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=YourKeyGoesHere' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>

//<![CDATA[
function OnLoad() {
var searchControl = new GSearchControl();
var siteSearch = new GwebSearch();
siteSearch.setSiteRestriction("YourSiteGoesHere");
siteSearch.setUserDefinedLabel("YourLabelGoesHere");
searchControl.addSearcher(siteSearch);
searchControl.setLinkTarget( GSearch.LINK_TARGET_SELF );
searchControl.draw(document.getElementById("searchcontrol"));
}
//]]>
</script>

It should look like this when you’re finished with that part:

Now you’ll want to change a few things:

  • First and most importantly, replace YourKeyGoesHere with your API Key. This is where you’ll need to paste some of the code generated earlier (in step 1) when you signed up for the Google Ajax Search API Key.
  • Replace YourSiteGoesHere with the name of your website (don’t delete the quotes). I used cjmillisock.com
  • Lastly, replace YourLabelGoesHere with a label for your search results (again, leave the quotes in the code). I used CJMillisock.com and you can see the results in this screenshot.

Step 3: Style your search control.
You’re almost done! To position your search control in the upper right, scroll to where your template shows the style for your pages’ body (see screenshot below for help). Look for:

body {
background:$bgcolor;
margin:0;
color:$textcolor;

You’ll need to paste the following code into your template above the line “body {“:

#searchcontrol
{
position: absolute;
top: 5px;
right: 10px;
background: #FFF;
border-left: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding-left: 5px;
padding-bottom: 5px;
font: 10pt Verdana;
}

It should look like this when you’re done:


Finally, save your template. Click view blog and you should see the Google Ajax Search Control in the upper right! The search control will search only your site, and clicking a search result will open that page in the current window or tab. Now your website’s visitors won’t need to leave your page to search your site!