Add Light Box Image

Greeting... this is my first 2010 year blogger tutorial. I feel very excited with this year because my feeling say that many good things will happen to me. Let's we start the year happily without thinking any bored things.  
Want to make your image stylish when you click on it, check this out!

Demo

Step 1 : Adding the Script

1. Find this </head> code.

2. Replace the </head> code with this code:

<link href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/>

</head>

Step 2 : Adding the CSS code

1. Use Crtl+F and search for this ]]></b:skin> tag.

2. Replace this ]]></b:skin> tag with this code:

.syafzpicbox {

display: block;

margin: 0px auto 10px;

text-align: center;

cursor: pointer;

cursor: hand;

width: 400px;

height: 324px;

}

]]></b:skin>

3. Click on the Save Template button.



Step 3 : Add the light box image in posts

This step will show how to add the light box image in your blog posts.

1. Make sure you use this code in where you want the Light Box Image to be appeared:

<div id='syafzpicbox'>

<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="YOUR IMAGE URL"><img src="YOUR IMAGE URL" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

</div>

2. Just replace the YOUR IMAGE URL with your own image url...

Enjoy them!

Please Leave a COMMENT

InspiredMagz.com