Label
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/AVvXsEjRlCxTofBHx1VROTlQ6tXhMScXUNGPspECgeKkQvgOmfsmfEd8Fx-Ff_ZDz3y5HbcM0ZbrP3-3oCnrdJaM6_MyPW4OOAtod-nnl3bBYRFdgxoRiJygEhr5tcYOu6tZPno5x-M4zrXkuV4/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVYw8epEyaVBUkybqguNqu7EixtZPggSdGJ94zhaDYkewnFaprud-YmS2NYpw1DVvM7q7po1z5hefOiu9Sy8gQDWWmt00SC915l-GwFODTyJAvqW3miZmOqT7JpdapStYJKqmohdZI-nM/) 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
Artikel Terkait :
Tutorial Blogger
- Cara Menampilkan Status YM di Blogger
- Cara Kompres Kode CSS dan Javasript
- Memasang Artikel Populer di Blogger
- Cara Membuat Kotak Komentar Facebook di Blogger
- Daftar Kode-Kode HTML
- Cara Cek Broken Link di BLog
- Membuat Sitemap atau Daftar Isi Blogger
- Membuat Halaman Statis di Blogger
- Menambahkan Icon Pada Link List
- Cara Pasang Iklan di Blog (KuumpulBlogger)
- Jquery Multi Level Menu Horizontal
- Memasang Tombol Like Facebook di Blogger
- Cara Membuat Recent Posts di Blogger
- Cara Membuat Label Cloud
7 Comments
Comments
Unknown
:
Wow keren baget... bro.....
Unknown
:
salam sahabat
bentar dulu ....apa ganti baju yach?tutorial ini sangat bagus dan memberikan kesan efektif mas..makasih ya
Agus Candra Kurniawan
:
Alhamdulillah punyaku bisa teman, terimakasih banyak ya teman... Jazakumullah Khairan Katsira
Koko Bota
:
nice info sob........
sukses trus ya....
sigit
:
light box punya q kok ga bekerja ya bang,
ow ya,
rel="lightbox" title="Your image Caption" di pasang pada kode gambar sebelah mana,
ga pernah brasil tuh..
makasih ya..
puluth®
:
wah, kalau ada contoh lebih mantap ne, , terima kasih lah. . .
wuih keren nie ada efek light boxnya
sukses selalu