Thursday, December 31, 2009

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

3 comments:

Fær.han/Unown F/Gyan on January 4, 2010 at 5:15 PM said...

YEAH! Ni la emas! =p NICE!

Syarhan on January 4, 2010 at 5:32 PM said...

Bro, you are my friend. Have you take award at my blog.If you did not take it yet, please take it at http://blogging-style.blogspot.com/2009/12/award-for-friends-here.html. Award for you and friendship forever

skin tags on August 21, 2011 at 8:34 AM said...

This tutorial is pretty impressive but I hope that you will put some video of your tutorial so that we can easily understand what you are trying to tech us.

Post a Comment

 

Blogger Tips and Style Copyright © 2009 Community is Designed by Free Blogger Template