Hi! Everyone, hope you all are fine.
Today in this post I will tell you how you can use Light Box in Blogger.com blog. Light Box is an image viewer and all of you must have show the Image viewer on my blog, if you didn’t show click on the below image to see demo.
Image credit: IceBone
When I was on Blogger.com I wanted this feature on my Blogger.com blog but didn’t knew how I can use it but when I shifted to WordPress I finally got it on my blog and if you are also on WordPress you can use Slimbox plugin. And if you are Blogger.com user and want this on your Blogger.com blog here how can
- Go to Blogger.com
- Login to your account
- Now go to Design –> Edit HTML
- Their search for <head> opening tag
- Copy-past the below code just after the <head> opening tag
- Click on SAVE TEMPLATE button
- Now whenever you make a post with images and you want to use this effect on that image copy you need to do the following
- Go to Blogger.com
- Login to your account
- Now go to NEW POST
- Compete your post (write, insert, whatever you want to do in that post)
- After you competed (also inserted the image) click on Edit HTML tab
- Add this code in every a tag before every img tag
- Now change the ALBUM-NAME and IMAGE-CAPTION with your album name and image caption
- And publish the post
<!-- Light Box Code Starts SJbn.Co -->
<link href='http://img.sjbn.co/lightbox-2.04/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>
<script src='http://jajodiasaket.googlecode.com/files/lightbox2.04-lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends SJbn.Co -->
rel="lightbox[ALBUM-NAME]" title="IMAGE-CAPTION"For example see below
<a rel="lightbox[ALBUM-NAME]" title="IMAGE-CAPTION" href="http://3.bp.blogspot.com/_drKDGeYmwR4/TUwHK7std9I/AAAAAAAAA4s/zhLtImp_IFM/s1600/13330_102591409783669_100000984317950_19515_280045_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="288" src="http://3.bp.blogspot.com/_drKDGeYmwR4/TUwHK7std9I/AAAAAAAAA4s/zhLtImp_IFM/s320/13330_102591409783669_100000984317950_19515_280045_n.jpg" width="320" /></a>
Click here to see Light Box demo on Blogger.com blog
You can use the left and right arrow key to change the image and Esc to close Light Box. If you want to make more than one set (album) of images in same page change the album name in the other set. The difference between in both the set (album) is you can’t change the image without closing the image viewer (Light Box)
Thanks to Lokesh Dhakar for making this codes.
If you have any question or problems do let me know.
its not working sir
Its working fine for me..!!