ProBloggerHacks: Adding Light Box To Blogger Images Fixed and working.

What’s New About This Widget

* First of all we add the widget code to our template,
* You’ll be able to (Link) this widget to your single images in blogger.
* You can use it to make photo gallery.
* You can make Slide show with it.
* You can add it to your (links).

How Is It Work

First of all we add the widget code to our template,
Then when we add an image to a new post we have to {Link} it to the widget by adding a tiny code to it by changing the post writing mode from compose to html don’t worry it’s easy, continue reading to figure it out
Step 1
</head>

And Before it add the following code.

<!--Code-By-AllBlogTools-->

<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'/>

<!--Code-By-AllBlogTools-->

Now we’ve add all require codes to the template, lets know how to use it.

Step 2 – How To Use

The way to make this widget works in your blog is very easy but you have to know what you do,
What you have to do is : add a small code to the images code. and you can find the images code in post writing area when you change the mode from compose to edit html.

Step 2.1 – Add It To Single Image

Go to blogger account, start writing your post in normal mode (compose)
And once you add an image to your post, please change your mode to edit html, see previous imsge
You’ll find the image code looks like the following.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

What we’ll need to add for this code is the next part

rel="lytebox"

Example Code For Single Image :

<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

And you are done.

Step 2.2 – How To Make Photo Group Gallery

We’ll do the same as the previous step, but instead of adding Only

rel="lytebox"

we’ll have to add a name for this code so it’ll be

rel="lytebox[groub1]"

when you add this code for more than one image, all the images will open as a group.
Example Code For Images Album :

rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_oddjpg">

rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS_p8Hh78DQHjasacAkFGDxFOjtpWQT67g8LSWtVlr87pw5YeQS9Y22eaHLEvMTNudnvQzFk5CSV2XApuNDeBNtCiHTj2JOjEu4he81bDK4gETdu1yoQgu3skH4-4ZfJ90J7wrCMXVl8U/s1600/3924705805_15d638ca8d_oddjpg">

Step 2.2 – How To Make A Slide Show

Instead Of adding