How to: Add Lightbox to Blogger

I'm not sure if you are like me, but...don't you hate it when you click on an image on your blog or someone else's blog and it sends you to an ugly page with just the image and then you have to go back a page to continue reading...or sometimes just close out the tab by accident and never go back to the blog post?  I hate that blogger doesn't have a built in image handler.


Well, today you are in luck.  I've come across a little gem of a hack/plugin (I call it a hack just because it is not supported natively by blogger) that will help people stay on your blog when they click on an image to see the larger shot of it and it makes your blog look professional. :)


It's called Lightbox.  It overlays an image on top of your blog with a sweet little dimming effect.  Click on the image below to see what I'm talking about.  (it's a huge image by the way...just click in the shadow area to close it)

Awesome!  Ready to get started?  I'll guide you through all the steps so go ahead and open a new tab and log in to your own blogger account if you aren't already.  

Step 1
Go to the 'Blogger Dashboard' if you are not already there.  Now click on 'Design' and then look for 'Edit HTML' (that should be toward the top left of your screen).


Great!  Now on to Step 2.


Step 2
Click into the large text area on the 'Edit HTML' page and we're going to find /head (ctrl+f and type /head).  It should be highlighted.  Now copy the below section of code right before the /head tag.


<link href="http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.css" media="screen" rel="stylesheet" type="text/css" /><br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script><br /> <script src="http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.min.js" type="text/javascript"></script>


Like so...

Make sure your code looks like mine above.  Now save the template.


Congratulations!


That's all you need to do.  All of you existing images and any new images you add to your blog will now be displayed in Lightbox.  You now have a fun, impressive way to display images on your blog.  If you have a photo blog, this will truly help in your presentation of your pictures.


Let me know if you use this on your blog, I always love helping others out.  If you need any additional help, please let me know too.  Look for more helpful how-to's in the weeks to come!