Ş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.
- 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.





















Başlıkta yazdığı gibi herşey çok açık..













