Saat Ini Orang Sedang Online

Memasang 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 buatnya saya akan memaparkannya.

1. Login ke Dashboard anda
2. Masuk ke Layout > Edit HTML
3. Cari Kode </head>

dan masukan kode berikut ini di atasnya :

<!--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&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://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.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; }
</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-->

4. Save template anda

Semoga bermanfaat





Sumber : Fhajar






Anda telah membaca artikel tentang Memasang Efek Light Box Blogger dan anda bisa menemukan artikel ini dengan url http://binhakim.blogspot.com/2011/09/light-box-merupakan-salah-satu.html, anda boleh menyebarluaskannya atau mengcopy paste-nya jika artikel Memasang Efek Light Box Blogger ini dirasa bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Memasang Efek Light Box Blogger sebagai sumbernya.
Terima Kasih

Artikel Yang Berhubungan :



0 Komentar:

Posting Komentar

Terima Kasih Atas Komentar Anda !!!!!

Related Posts Plugin for WordPress, Blogger...

Artikel Pilihan Lainnya

TOKO BUKU :

Silakan diklik mana buku yang akan anda dapatkan