Blogger için muhteşem resim eklentisi: Lightbox

Blogger konulu yazılarımıza devam ediyoruz. Şimdi anlatımını yapacağım eklenti, gerçek anlamda muhteşem diyebileceğim bir eklenti. Bir çok profesyonel olarak hazırlanmış web sitesinde sanıyorum ki bu eklentiye benzer görseller ile karşılaşmışsınızdır. Yani eklentiden biraz bahsetmek gerekir ise; blogunuzdaki resimetıkladığınız zaman direk resmin açılması yerine; bu eklenti sayesindearkaplan kararır ve sonra  ortaya resim çıkar. Ve dolayısı ile, blogunuzda gerçek anlamda çok güzel görünüm sağlamış olur. Eklentinin kurulumu başta belki biraz karışık gelebilir. Fakat aşağıdaki adımları yavaş bir şekilde okuyarak, uygular iseniz eklentinin kurulumunun çok basit olduğunu anlayacaksınızdır.

Öncelikle blogumuzun CSS kısmına aşağıdaki kodları ekliyoruz;

#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; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 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/ileri.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; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }

Daha sonra, blogumuzun temasında yer alan aşağıdaki kodu bulalım;
</head>

Daha sonra ise, aşağıdaki kodları yukarıdaki koddan önce yerleştiriyoruz;

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://teknobeyin.googlecode.com/files/scriptaculous.js' type='text/javascript'/>
<script src='http://teknobeyin.googlecode.com/files/lightbox.js' type='text/javascript'/>

İşte herşey bu kadar..

Eklentiyi kullanmak için, yazınıza resim ekler iken eklediğiniz resmin kodlarını aşağıdaki şekilde değiştirmeniz gerekiyor.

Eklediğiniz resimin kodlarında aşağıdaki koda benzer bir kodu bulun;
imageanchor="1"

Yukarıdaki kodu bulduktan sonra, yukarıdaki kodun sağ tarafına aşağıdaki kodu ekleyin;

rel="lightbox" title="Eklediğiniz Resmin Başlığı"

Not: Yukarıda yer alan kırmızı renkli yazıyı, resminizin başlığı ile değiştirmeyi unutmayınız.