lightbox etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
lightbox etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Lightbox js ile Blogger'de Resimlere Efekt Verelim

| | Comments

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

MultiBox İle Blogger'inizi Coşturun!..

| | Comments

TeknoMobi

Bir önceki yazımda sizlere yeni bir yazı dizisi ile karşınızda olacağımdan bahsetmiştim. Ehh artık Blogger kukllanıcılarını fazla bekletmeden blogunuzu çok daha kullanışlı hale getirebileceğimizi gösterelim. Şimdi bazılarının aklına yazı dizisi neden yapıyorsun bir yazıda anlatsan olmaz mı diyenler çıkabilir. Ama yapacağımız işlemlerin detaylı olması ve acemi kullanıcıların kolaylıkla anlayabilmesi için yazı dizisi olarak yayınlamayı uygun gördüm. Ama şunu belirtmeliyim ki ülkemizde Blogger uygulamaları ile uğraşan pek fazla kişi yok olanlarda bir süre sonra kendini kenara çekiyor. Neden diye kendimize sorarsak yazılara yeterli ilginin gösterilmemesi daha doğrusu yazılara geri dönütün sağlanmaması diyebiliriz. Yorum yapılmaması vb.

Bende elimden geldiğince Blogger alt yapısı ile yayın yapan blogculara bloglarını daha kullanışlı hale getirebilmeleri için çalışıyorum. Ama yukarda bahsettiğim gibi gerekli geri dönütleri aldığım pek söylenemez. Neyse konuyu fazla uzatmayacağım.

LightBox uygulamasını çoğu kullanıcı biliyordur. Mutlaka bir blogda veya sitede denk gelmiştirsiniz. LightBox ile resimleri blogumuzdan ayrılmadan hoş bir şekilde gösteriyoruz. LightBox'un Blogger'e entegre etme işlemini Düşüngeç'teki yazımda anlatmıştım.

Şimdi ise LightBox'un çok daha gelişmiş bir türevi olan MultiBox uygulamasını Blogger için kullanılabilir hale getirdim. MultiBox ile neler mi yapabiliriz.

  • Resimleri blogumuzdan ayrılmadan açılır hale yani pop-up şeklinde açabiliriz. 
  • swf, flv gibi flash videoları 
  • mov uzantılı quicktime videoları
  • wmv uzantılı  windows media videoları
  • rv / rm / rmvb uzantılı real mediavideolarını
  • mp3 formatındakimizik dosyalarını
  • ve Youtube, Vimeo, Dailymotion, Google Video, Yahoo Video sitelerindeki videoları blogunuzdan hiç ayrılmadan ziyaretçilerinize dinletebilir / izletebilirsiniz. Bunların hepsinin örneklerini aşağıda verdiğim demo sayfasındaki bağlantılara tıklayarak görebilirsiniz.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Multibox uygulamasının tarayıcı uyumluluğu : Firefox 3/3.5 , Chrome 2-3 , Safari 3-4 , İnternet Explorer 7-8 , Opera 9-10

MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7