Blogger için LightBox kurulumunu sizler için çok kolay hale getirdim diyebilirim. Javascript dosyaları ile herhangi bir düzenleme yapmanıza gerek kalmadan LightBox'u blogunuzda kullanabileceksiniz. Daha önce bazı arkadaşlar bloglarında anlatmışlardı. Fakat bu anlatımda LightBox'un en yeni versiyonu kullanıldı. Ayrıca Prototype.js dosyasının içindeki gereksiz yerler çıkartılarak boyutu biraz daha düşürüldü.
LightBox için gerekli olan düzenlemeleri ve js dosyalarını sizler için yükledim. Öncelikle LightBox uygulamasının ne olduğunu bilmeyenler Buradaki sayfa tamamen yüklendikten sonra yazı içindeki resimlere tıklayabilir ve LightBox'un ne işe yaradığını görebilirler.
Şimdi gelelim LightBox'u blogumuza nasıl entegre edeceğimize...
- Öncelikle temamızda Yerleşim > HTML Düzenle > Widgetları Genişlet diyoruz.Her ihtimale karşı şablonumuzun yedeğini alıyoruz.
- Ardından Ctrl+F yaparak </Head> kodunu aratıyoruz. Bu kodun hemen üstüne aşağıdaki kodları yapıştırıyoruz.
<link rel="stylesheet" href="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/lightbox.css" type="text/css" media="screen"/>
<script src="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/prototype.js" type="text/javascript"></script>
<script src="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/lightbox.js" type="text/javascript"></script>
- Şablonu kaydet diyoruz. Artık LightBox'u blogumuza entegre ettik. Bu aşamadan sonra yapacaklarımız blogumuza gönderdiğimiz yazılar üzerinde gerçekleşecek.
Blogumuza LightBox'u entegre ettik. Yazılarımızı yayınlarken yüklediğimiz resimlerin üzerine ufak bir kod eklememiz gerekiyor.
- Eğer bir tane resim eklediysek yazımızı yayınlamadan önce Yazının HTML'yi Düzenle sekmesine tıklıyoruz (Oluşturun Yanındaki). Resim kodumuzun içindeki imageanchor="1" yazısından sonra bir boşluk bırakıp rel="lightbox" yazıyoruz. (Örnek sayfadaki ilk resim)
- Eğer bir tane değilde daha fazla resim göstereceksek yine üstteki gibi resim kodlarının içlerinde ki imageanchor="1" yazısından sonra bir boşluk bırakıp rel="lightbox[TeknoMobi]" vb. gibi yazıyoruz. burada yazdığım TeknoMobi Aynı pencerede peşpeşe görünecek resimlerimizi belirliyor.(Örnek sayfadaki 2,3,4 üncü resimler)
- Resiminizin altında açıklayıcı bilgi vermek isterseniz yukarıda verdiğim rel= kodlarından sonra title='Açıklama' şeklinde yazabilirsiniz.
En kısa zamanda blogunuza eklemenizde kolaylık sağlayacak videolu anlatımıda vermeye çalışacağım.