We continue our articles on Blogger.. The plugin that I’m going to explain now is a plugin that I can truly call amazing. I think you have come across images similar to this plugin on many professionally prepared websites.. So if you need to talk a little about the plugin; When you click on the image on your blog, instead of opening the image directly; thanks to this plugin, the background darkens and then the picture appears. And so it really gives your blog a really nice look. The installation of the plugin may seem a bit complicated at first.. But if you read and follow the steps below slowly, you will understand that the installation of the plugin is very simple.

First of all, we add the following codes to the CSS section of our blog;

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; ball: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; ball: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://img222.imageshack.us/img222/2760/gerih.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://img819.imageshack.us/img819/9932/forward.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; ball: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; ball: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }

Then, let’s find the following code in our blog’s theme;

Then, we place the following codes before the above code;

<

That’s all..

To use the plugin, you need to change the code of the picture you add while adding a picture to your article as follows.

Find a code similar to the code below in the codes of the image you added;
imageanchor=”1″

After finding the above code, add the following code to the right of the above code;

rel=” lightbox” title=”The Title of the Picture You Added”

Note: Remember to replace the red text above with the title of your picture.