I got a few request for budding a Lightbox plug-in for
Blogger blog. Fine, here it is.
A Lightbox is a type of pop-up box, displaying an image above
the web-page. It is not a new browser window, but a box that floats over your
current browser window.
If you want to have this Lightbox on your Blog, follow the
instructions:
1st: Backup your template.
2nd: Download the following files:
3rd: Insert the following line of code to your template,
inside the <head>-section:
<script type='text/javascript'
src='yourhost/lightbox.js'/>
Replace "yourhost" with the domainname of the
place where you host your scripts and images. Save your template.
4th: Upload files
Upload the image files to your webhost. Open the
javascript-file in Notepad, and edit the url's of the image-files, so that they
link to your host. Save the javascript-file, and upload it too.
5th: Adding CSS
Add CSS to style your lightbox.
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#lightbox img{ border: none; }
#overlay img{ border: none; }
6th: Editing your post
Create a post and upload an image. Enter your text, and just
make it a nice post.
Then, inside the <a href="..." > tags, add
rel="lightbox" and title="Your title" and publish your
post. If you click on the image, the large version of your image will pop out
of the screen.
educationLabels: Blogging Tips
