Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

Adding Superbox (Light Box) Widget To Blogger Images. Fixed.





Few weeks ago, i posted here a tutorial about Light Box ( Fancy box ) Widget For Blogger Images And Links ( click here )

And we all mentioned that there are a lot of problems about this widget, refer to comments below the tutorial to know more.



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


Adding Superbox (Light Box) Widget To Blogger Images. Fixed.


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.


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/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="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/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="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/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="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/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 :


<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/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="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/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="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>


Step 2.2 – How To Make A Slide Show

Instead Of adding


rel="lytebox[groub1]"


We’ll add

rel="lyteshow[groub1]"

Example Code For Slide Show :


<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/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="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/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="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>



Demo

Click here to see demo, special thanks for dolem



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.



code

0 comments:

Post a Comment