Foto Galeri Eklentisi (Light Box)

Çok kişinin aradığı ve birçok sitenin kullandığı eklentilerdendir. Uzun zamandan beri Blogger için işinize çok yarayacak eklenti paylaşmamıştım. Web sitenize foto galeri eklemek için en uygun kodu aşağıda paylaştım. Kodun kurulumu oldukça basit ve detaylı şekilde anlattım.

Light Box nedir ilk önce onu açıklığa kavuşturalım. Light Box, bir resim görüntüleme eklentisi anlamına gelir.

1. Aşama: Blogger Yönetim panelinize girin

2. Aşama: Yerleşim ► HTML'yi Düzenle kısmına gelin.

3. Aşama: Asağıdaki kodu temanın içinde bulun.

</head>

Yukarıdaki kodun bir satır üstüne aşağıdaki kodları ekleyin ve kaydedin.


<!--Light Box Blogger Resim Baslar--> <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>#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://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/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'/> <!--Light Box Blogger Resim Biter-->

 Kodlama işleminin 1. Aşaması bitti. 2. Aşamada yapmanız gerekenler aşağıda;


Yeni >> Oluştur - HTML bölümünden (yani herhangi bir konu eklediğiniz kısım ) aşağıdaki kodu ekleyerek kendinize göre düzenlemeler yapmanız gerekmektedir. Bunun için kendinize ait bir resim ve url gerekli olacaktır.

  <center> <table border="0"><tbody> <tr><th align="center">1</th><th align="center">2</th><th align="center">3</th><th align="center">4</th><th align="center">5</th><th align="center">6</th><th align="center">7</th><th align="center">8</th><th align="center">9</th></tr> <tr><td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-1.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="İlk Domin"><img border="0" src="http://i.imgur.com/zq9zlGi.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-2.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="İlk Web Site"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEhCdcJBqj2Un8pDdPHL2zkgrdxxVKasDWil4fvf7Ap5VnWoXV0cr4i2X4R3_WltyF0y55WWUKJMp_wCLMD5J8AW7L1GQHCkjAh2h0zEsCAbh45ubglAoDp5nG0m4wgM=" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-3.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="eBay ilk satış"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHYFB0Ads7q8nBa0AlZn2CkyP6vAhQ9Lce913q4pfPham6-ObOREMWmhmVFZO37m5aEm66oBN4AKLXy4J7T12h8OhS-FInax8XrqkQJcseIxvogYkuNwl6mEuULiw3iqjEtmhDrem7qHQ/s1600/Ads%C4%B1z.png" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-4.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="İnternet,Tv, Radyo"><img border="0" src="http://i.imgur.com/0grusNT.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-5.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="İnternet Trafiği"><img border="0" src="http://i.imgur.com/jrQVz2r.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-6.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="Everest ve İnternet"><img border="0" src="http://i.imgur.com/RqQiqlZ.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-7.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="Günde 100 bin Domain"><img border="0" src="http://i.imgur.com/gUenW63.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-8.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="İlk Yüklenen Video"><img border="0" src="http://i.imgur.com/Hs7Ef4x.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-9.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="Facebook'un ilk Üyesi"><img border="0" src="http://i.imgur.com/zYZC2ep.png" height="40" width="40" /></a></div> </td> </tr> </tbody></table> </center>

Eklenti DEMO 

Bir önceki konumuz >>  Robot.txt Dosyası Düzenleme