Light Box

Akhirnya light box gw jadi juga , fyuh...
aneh gw sama google, kenapa lightbox yang dia bikin gak bisa dipake semua blog? maksudnya blog yang templatenya bukan dari si embah maka gak bisa make light box yang udah disediain, marah kali yaa :(

Akhirnya terpaksa udak-aduk searching ngore-ngorek si embah biar mau ngasih tau siapa-siapa temen yang bisa bantu, alhamdulillah dapet juga :D

Cara pertama, cara kedua, .... sampe gak tau ini gw make yang keberapa yang akhirnya sukses gw pake. Tapi ternyata setelah sukses masalah blom kelar cing, ukuran gambar asli gw gede banget, jadi kalo di lightbox langsung menuhin satu layar komputer gw :( nangis gw...

Terpaksalah akhirnya manual, gw resize gambarnya sebelum di upload kesini (klik gambar yah) dimulai dari ukuran gubahan, ukuran asli sampe ukuran gubahan ideal yang pas buat gw :).

Nah buat temen-temen yang templatenya dari penyedia lain dan lightbox dari blogspot gak berfungsi, mungkin bisa coba tips yang satu ini, ya... walaupun emang agak ribet karena gak instant dan gak bisa kepasang buat tiap postingan tetep lumayanlah, lumayan memperganteng blog kita :D

Sebenarnya ini cara udah kawakan, tapi karena saya juga yang gaptech dan baru ngeh sekarang gara-gara tampilan facebook dan google plus, maka jadi ngudek-ngudek ke temen-temen bloger yang berpengalaman.

1. Cari kode: </head> (pake control + F biar cepet) di menu setting --> edit template
2. Kalo sudah ketemu, masukin kode dibawah diatas tulisan </head>
<!--Light Box Code Starts  Bloggerplugins.ORG-->
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz5GVX3goCcyUvLsp4bpV_s9YYJSanV9kiOGkeKi3zrLMjS5Q0_-QvqWP_K-Vps__hu7PsLjIVQmZHC7c9E2G0KrOjWG3nORy6ZbVY868vXTni3oh_pc9Ewm5UJD6ZJ0TdfQKJMqyqe_E/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1YvcSo1qf6AcGzzhvJrdG34xYGyUV6UoLHio3VWqnWIlbZLRdqAI9L4-_Ubr89wv_vAM-xvptzrxj2p-FT2a2OUpwcAQ7Fz2Pf0qquABzcHDlUdTbTROVQt2D-GHcnA6t10_lVAs26o/) 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; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends Bloggerplugins.ORG-->

3. Save dan selesai (untuk kode HTML templatenya) dan lanjut ke postingan kita.
4. Masuk ke postingan kita yang ada potonya, terus tambahin dengan tulisan: rel="lightbox[namaalbum]" sebelum tulisan [tyle="margin-left: 1em; margin-right: 1em;"] dan setelahnya tambahin dengan tulisan kedua: title="keterangan gambar"

Contoh (ini gambar gw yah):
Kode html asli gambar:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-pnjLjpwZgPk/TuVe_XYrgmI/AAAAAAAABJ4/GRjA9H9tRjY/s1600/jondur1253-001.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/-pnjLjpwZgPk/TuVe_XYrgmI/AAAAAAAABJ4/GRjA9H9tRjY/s320/jondur1253-001.jpg" width="320" /></a></div>

Kode setelah di edit:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-pnjLjpwZgPk/TuVe_XYrgmI/AAAAAAAABJ4/GRjA9H9tRjY/s1600/jondur1253-001.jpg" imageanchor="1" rel="lightbox[albumname]" style="margin-left: 1em; margin-right: 1em;" title="Korban kekerasan"><img border="0" height="240" src="http://2.bp.blogspot.com/-pnjLjpwZgPk/TuVe_XYrgmI/AAAAAAAABJ4/GRjA9H9tRjY/s320/jondur1253-001.jpg" width="320" /></a></div>

Tulisan [albumname] di kode rel="lightbox[albumname] fungsinya biar gambar-gambar yang ada disatu halaman bisa nyambung pas ditampilin. Tapi kalo gak mau nyambung tulisan [albumname] nya dihapus aja :)

5. Selesai (tapi cara nomor empat ini manual, jadi tiap temen-temen posting gambar ke blog dan pengen jadi lightbox, temen-temen harus edit html postingannya (yang buat gambarnya aja). Capek sih, tapi cuma sebentar kok. Yang penting poto kita bisa mejeng lebih bagus :D

6. Selesai.