Blogger Eklentileri Lightbox

   Blogger eklentilerinin vazgeçilmezi olan lightbox blogunuza seo açısından büyük bir katkı sağlayacak.Blogger eklentileri olarak lightbox'u kullanırken ziyaretçi resimlere tıkladığında resim popu penceresinde açılacak ve ziyaretçi sayfanız dan ayrılmadan eklentimiz lightbox tarafından resim direk popu penceresinde açılacak.

blogger eklentileri lightbox



Faydaları Nelerdir?


*Ziyaretçi sayfadan ayrılmadan resmi görüntüler
*Seo açısından büyük katkısı vardır
*Blogger eklentileri olarak kullanılabilecek en iyi eklentilerdendir.
*Görünüm açısından + puan kazandırır
*Arkaplan kararır ve resim bir kutu içinde gösterilir.


Blogger Eklentisi Lightbox'u Nasıl Eklerim

Blogumuzun css kısmına şu kodları ekliyoruz.

#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>#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://img222.imageshack.us/img222/2760/gerih.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://img819.imageshack.us/img819/9932/ileri.gif) 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; }


Daha sonra blogumuzun temasında </head> kodunu bulup  </head> kodundan önce aşağıdaki kodları ekliyoruz.


<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='
https://code.google.com/p/lightboxa/source/browse/scriptaculous.js' type='text/javascript'/>
<script src='http://harunlog.googlecode.com/files/lightbox.js' type='text/javascript'/>


Blogger eklentileri lightbox kodunun eklenmesi bu kadardı.Şimdide resimlere nasıl lightbox vereceğimizi görelim.

Eklediğimiz resimlerde şuna benzer bir kod bulunur imageanchor="1" bu kodun sağ tarafına şu kodları ekleyelim.

rel="lightbox" title="Eklediğiniz Resmin Başlığı"

Kırmızı ile işaretlenen yeri resmin başlığı ile değişin.




Yorumlar