Membuat Efek Light Box Blogger
Jumat, 28 Januari 2011
|
Tutorial Blogger
|
Membuat Efek Light Box Blogger - Light Box merupakan salah satu fasilitas blogger yang paling baik. Dengan menambahkan add on ini, gambar kita akan mendapatkan efek cahaya yang sangat elegant.
OK. Bagi yang ingin tahu cara buat nya saya akan memaparkannya.
1. Login ke Dashboard anda
2. Masuk ke Layout > Edit HTML
3. Cari Kode </head>
dan ganti dengan
<!--Light Box Code Starts bos-sulap.blogspot.com-->
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1BLHmFmGH2fkl3RuubidkfNKIsCFMUw_cJYtpSx6naOmHhyv5xPgJ74EaFYK2OSxWhNHQ48oCrDozfm9NOgrJEXNHpgP520iNtaoAcM6DxRB1IJdm-qSGuMe_MH5OzlSdFLnBbKUkgjI/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpEMlfbWlwn9qQvTkCl5cEIRq_DsoPuPMH6-3Ly7gy0p9rO9vWoVxf7pErXrioeuP2opg1sjzYBbbUeY9LjotTOrLzNtcoXiGhuT4K2F3bJI7gbt_f8NBMt8PNc5KhEcAFqTmvlVJllZk/) 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://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends bos-sulap.blogspot.com-->
</head>
4. Save template anda
Cara Mengaktifkan Efek Light Box
1. Buat Postingan Baru
2. Upload Sebuah Gambar yang ingin diberi Efek Light Box
3. Ganti ke tampilan EDIT HTML
4. Tambahkan rel="lightbox" title="Your image Caption" pada kode gambar anda
kalau ada pertanyaan silahkan isi kotak komentar di bawah
1
Langganan:
Posting Komentar (Atom)
1 Agustus 2011 pukul 02.02
nice post sob... please visit XFILEGURU