Blogger Light Box Widget

B Share Today i’ll write a tutorial about adding Updated and fixed lightbox widget for blogger. And I WISH it’ll be easy and you’ll like it.

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

GO to your blogger account dashboard and navigate to Layout >> Edit html and find the following code.</head>

And Before it add the following code.

<!--Code-By-TutZone1-->
<link href='http://www.mydatanest.com/files/tutzone1/32404_syskn/Blogger%20Light%20Box%20Widget.txt' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.mydatanest.com/files/tutzone1/32405_3g94u/blbw.txt' type='text/javascript'/>
<!--Code-By-TutZone1-->




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 Please see the next image.

What And How To Add :

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.


<img style="cursor: pointer; width: 200px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" alt="" id="BLOGGER_PHOTO_ID_5409505597205757282" border="0" />


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/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" alt="" id="BLOGGER_PHOTO_ID_5406207422236379378" border="0" /></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[group]"

when you add this code for more than one image, all the images will open as a group.

Example Code For Images Album :


<a rel="lytebox[group]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.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/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lytebox[group]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.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/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>


Step 2.2 – How To Make A Slide Show

Instead Of adding

rel="lytebox[group]"

We’ll add

rel="lyteshow[group]"


Example Code For Slide Show :


<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.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/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>


<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.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/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>




Step 2.3 – And You Can Add It To Links

The normal link code looks like this

<a href="http://www.google.com" title="Search Google"rev="width: 400px; height: 300px;">Google Search</a>


We’ll add the following Code to it.

rel="lyteframe"


So The Code will be

<a rel="lyteframe" href="http://www.google.com" title="Search Google"rev="width: 400px; height: 300px;">Google Search</a>


And you can apply the same settings for slide show and photo groups for the links.

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Kindly Bookmark this Post using your favorite Bookmarking service: