You might notice the animation everytime you click on the pics of my posts. Its the Lightbox version 2.04 script that I've integrated with my template. It makes my pics somewhat like a picture gallery. Hehe... Thanks to master, he taught me how to do it. Wondering how I did it? Here's a short guide:1. Log in to your Blogger account, then go to your Layout and then to Edit HTML. Add the code below between your header tag (<head>.. </head>).
<link href="http://www.virtuosomaster.com/tutorials/samples/lightbox/css/lightbox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/prototype.js" type="text/javascript"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/lightbox.js" type="text/javascript"/>
2. Upload your images to your blogger account or to any image hosting sites like Photobucket. I prefer to use the default image uploader as it saves you time in editing the thumbnails of the images.
3. Go to your post where you've uploaded the image, click Edit Html and check the code where the url of the image is located. You will see a code like the one below.
4. Replace the highlighted code with rel="lightbox". Look for this line “-h” in the <a href tag. It looks like this:
http://4.bp.blogspot.com/…/s1600-h/127581731l.jpgRemove “-h” in “/s1600-h/” to look like this:
http://4.bp.blogspot.com/…/s1600/127581731l.jpg
5. Publish your work and do some testing. If you have a set of related images that you would like to group, follow step four but additionally include a group name between square brackets in the rel attribute. Example: rel=”lightbox[group_name]“.
If you like to customize your lightbox, download Lightbox v2.04 here and upload to your host.
2 comments:
really nice info
Post a Comment