Daha önce Düşüngeç'te ki yazımda Lightbox'un Blogger üzerinde nasıl çalıştırılacağını ve nasıl kullanılacağını anlatmıştım. Lightbox üzerinde birkaç iyileştirme yaptım. Ayrıca efektlerin next-prev-close resimlerini ileri-geri-kapat şeklinde güncelledim. Yani bir nevi Türkçe'leştirdim.
Lightbox'un Blogger'de kullanılabilmesi için temanıza eklemeniz gereken dosyaları sizler için kendi dosya barındırma depoma yükledim. Sizlerin tek yapması gereken aşağıda anlattıklarımı uygulamak...
İlk olarak Ligtbox uygulamasının blogger üzerinde nasıl çalıştığını görmek için buraya göz atabilirsiniz. (Bu verilen bağlantıda bir önceki lightbox anlatımımdaki dosyaları kullandım. Sadece örnek olması için bakabilirsiniz)
Lightbox Blogger Entegrasyon İşlemleri
- Ö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://turkiyem.weebly.com/uploads/1/6/3/5/1635244/lightbox.css" type="text/css" media="screen"/>
<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/prototype.js" type="text/javascript"></script>
<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/lightbox.js" type="text/javascript"></script>
Öncelikle şablonda önizleme yap diyoruz. Blogumuz açılıyorsa ş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.
Evet arkadaşlar blogunuza entegre ettikten sonra görüşlerinizi bildirirseniz sevinirim!..
