3 Blogger Lightbox Eklentisi | Resme Tıklayın Büyüsün !

Birçok sitede görüyoruz.Resim ekliyorlar fakat resim çok küçük oluyor , yeni sayfada açsak bile istediğimiz görüntüyü elde edemiyoruz.Lightbox eklentisi burada devreye giriyor.Yani resme tıklıyorsunuz ve resim arkplanı siyah olmak üzere büyüyor.

Aşama 1 : Kod Değişimi
Yerleşim / HTML'yi Düzenle'ye giriyor Widget Şablonunu Genişlet diyoruz.

CTRL + F yardımıyla aşağıdaki kodu buluyoruz :

</head>

ve bu kodun üstüne aşağıdaki kodu ekliyoruz:

    <!--Bilquer Lightbox Blogger Resim Kodunu Sunar-->
    <style>
    #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&gt;#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://i43.tinypic.com/mj5wyd.jpg) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(http://i44.tinypic.com/mjljmh.jpg) 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; }
    </style>
    <script src='http://sites.google.com/site/bilquer/Prototype.js' type='text/javascript'/>
    <script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
    <script src='http://www.weebly.com/uploads/2/2/1/0/2210502/lightbox.js' type='text/javascript'/>
    <!--Bilquer Lightbox Blogger Resim Kodunu Sundu-->

Buraya kadar işin pasif kısmını atlattık.Şimdi geldi sıra aktif kısma.Bu kısımda resmi yazılarımıza nasıl kullanacağımızı anlatacağım.

İlk olarak yazımıza başlıyoruz ve resim ekleme sırası geldiğinde resmimizi Blogger'a yüklüyoruz.

Aşama 2: Blogger'a Resim Yükleme:
Aşağıda gösterdiğim simgeye tıklıyoruz.

Karşımıza bir pencere çıkacak.Buradan sırasıyla Dosya Seç butonuna tıklıyoruz ve resmimizi seçtikten sonra aç diyoruz ve resmimizin yüklenmesini bekliyoruz.

Yüklendikten sonra karşımıza şöyle bir pencere çıkacak.Buna da Tamam diyoruz ve Blogger resim yükleme aşamasını geçmiş oluyoruz.

Aşama 3: Resim Kodumuz
Kodları ekledik , resmimizi yükledik şimdi ne yapacağız?
Resmimizi yükledikten sonra sayfamızdaki HTML'yi Düzenle butonuna basıyoruz.

Resminize ait imageanchor="1" rel="lightbox" title="Bilquer" kodunu buluyoruz ve bu kodun hemen yanına rel="lightbox" title="Resim Açıklaması" kodunu ekliyoruz.Bu kodu eklemezseniz resme tıklayınca, resim yeni sayfada açılır.Lightbox kullandığınızda yani bu kodu yazdığınızda resme tıklayınca resim büyüyecektir.

Yani ekledikten sonra şöyle bir kod oluşacak : imageanchor="1" rel="lightbox" title="Resim Açıklaması"


Bu arada Resim Açıklaması'nı istediğiniz gibi değiştirebilirsiniz.


Unutmayın büyütmek istediğiniz her resme bu kodları ekleyeceksiniz, eklediğiniz resimler bu kodu otomatik olarak eklemez ;)




İşte Örnek Resimler (Üzerlerine Tıklayınız) :

* Yazıda Özgün İçeriğin Yanı Sıra Aşağıdaki Sitelerden De Yararlanılmıştır

http://takipteyiz.blogspot.com/2010/03/light-box-blogger-resim-goruntuleme.html