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.
- 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.
- 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
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.
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 :
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/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/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/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/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/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/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/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>And you are done.
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/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/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/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/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/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/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/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/AVvXsEiZk_y8c1j2s74GztupRCfEJR_aap5mSOvt5EWE7P6xcsEIQh-nPiW6ncUJPi0wUMrR0mq6cAp5hLqXPtk8YFH_HGqbMSQWc0rYVDV-c_sWUIz9Fz4yrEThcr6DDB_tmxuLign9bcsT1HpX/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
Click here to see demo, special thanks for dolem
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.
0 comments:
Post a Comment