How To Add Lightbox to Blogger (Step 1-2-3)

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
For example, you can click the image bellow to see the result:

Step 1. Create a website using http://pages.google.com/. You should be able to use your Blogger login here. It will create a website at "your-google-id.googlepages.com". When the site manager comes up, leave it open.

Step 2. Download Lightbox from http://www.huddletogether.com/projects/lightbox2/#download. Extract the zip file to your disk somewhere.

Step 3. Within the extracted files, copy the following files into a temporary folder (location doesn't matter; we're just copying them out for the sake of neatness,) and rename them as specified. We're renaming them since Google Pages doesn't allow you to add folders to your website, and I personally didn't want lots of randomly-named files floating around. This ensures that the purpose of the files is fairly obvious.

• css\lightbox.css -> lightbox.css
  
• images\closelabel.gif -> lightbox-closelabel.gif
  
• images\loading.gif -> lightbox-loading.gif
  
• images\nextlabel.gif -> lightbox-nextlabel.gif
  
• images\prevlabel.gif -> lightbox-prevlabel.gif
  
• js\builder.js -> lightbox-builder.js
  
• js\effects.js -> lightbox-effects.js
  
• js\lightbox.js -> lightbox.js
  
• js\prototype.js -> lightbox-prototype.js
  
• js\scriptaculous.js -> lightbox-scriptaculous.js

~~> Click here to Go To next steps!