untuk sobat yang tertarik dan ingin menerapkan ini untuk blognya saya akan memberikan trik dan caranya memasang trik ini, silahkan disimak sampai paham...
pertama untuk memasang jquery lightbox silahkan letakkan kode berikut ini di atas kode
</head> pada template sobat1code-line:1-12code-line:1-2<link href='https://googledrive.com/host/0B05MjHQkbOjhSXduOHNBdmFUTWc' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B05MjHQkbOjhZWhBM2JHRGczX2s' type='text/javascript'/>
jika di dalam template sobat sudah terpasang jquery library versi lama silahkan ganti dengan versi terbaru
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> agar jquery lightbox nanti bisa berfungsi dan berjalan di template.setelah selesai dengan semua langkah di atas sekarang kita akan membuat file htmnya untuk demo, contoh lihat di bawah ini
1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-15<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>contohku lo ini</title>
<style type="text/css">
/* tulis css ente disini gan */
</style>
</head>
<body>
/* html contoh aja bro tanpa div elemen */
<h4>Berhasil berhasil berhasil dora dora dora</h4>
<h5>gimana coi ganteng kan</h4>
</body>
</html>
setelah selesai kita unggah lalu share untuk public seperti langkah biasanya yang anda lakukan saat menyimpan file di google drive maka simpan terlebih dahulu linknya contohnya seperti ni
https://googledrive.com/host/0B05MjHQkbOjhbVVpWUhzNHpSS0ksekarang saya akan membuat sebuah tombol dan sedikit css untuk demo dan contoh trik ini, silahkan di lihat
untuk css tombolnya saya buat sebagai berikut
1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-5.tombol{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.tombol ul {margin:0;padding:0}
.tombol li{display:inline;margin:0;padding:0}
.db-tombol-demo {border-radius:2px;padding: 8px 10px !important; background: #000; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.db-tombol-demo:hover { background: #FF8C00; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
lalu untuk html tombolnya seperti berikut
1code-line:4-12code-line:4-23code-line:4-34code-line:4-45code-line:4-56code-line:4-6<div style="text-align: center;">
<ul class="tombol">
<li><a class="db-tombol-demo" href="#">Demo lihat disini coi...</a></li>
</ul>
</div>
<div class="clear"></div>
nah sekarang tiba di bagian meletakkan pemanggilan jquery lightbox tadi, maka yang harus kita tambahkan adalah
class='lightbox' jadi hasilnya akan seperti ini1code-line:5-1<li><a class="db-tombol-demo lightbox" href="#">Demo lihat disini coi...</a></li>
cara menambahkan file html dalam trik ini adalah gunakan langkan sebagai berikut yaitu memanggile file html kita tadi menggunakan iframe
1code-line:6-1<a data-options='{"width":600, "height":450, "iframe": true}' href='link html yang telah di unggah di host'></a>
silahkan ubah ukuran nilai pada lebar
width":600, dan tinggi height":450, sesuai keinginan atau kebutuhanjadi untuk hasil akhir jika semua langkah di atas di satukan maka demikianlah hasil kodenya
1code-line:7-12code-line:7-23code-line:7-34code-line:7-45code-line:7-56code-line:7-6<div style="text-align: center;">
<ul class="tombol">
<li><a class="db-tombol-demo lightbox" data-options='{"width":600, "height":450, "iframe": true}' href='link html yang telah di unggah di host'>Demo lihat disini coi...</a></li>
</ul>
</div>
<div class="clear"></div>
Penggunaan untuk video
1code-line:8-1<a class="lightbox" href="http://www.youtube.com/watch?v=e1c-wAT0b6g">YouTube</a>
Banner atau SWF
1code-line:9-1<a class="lightbox" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Flash</a>
Penggunaan pada gambar
1code-line:10-1<a class="lightbox" href="url-gambar-besar-ente-gan"><img src="url-gambar-ente-kecil-gan" alt=""/></a>
untuk penerapan lainnya coba saja di pelajari sendiri...
demikian saja sob, selamat mencoba dan berekperimen sesuai kesenangan ya....
21 komentar
Waaah perlu di coba
BalasHapussilahkan dicoba
Hapuskeren gan, kapan-kapan dicoba yaa
BalasHapussilahkan sob, biar blognya tambah keren
Hapuskeren kaya blog agan ini ya? hehe
Hapusnanti saya coba gan
BalasHapussilahkan mbaknya
Hapuskeren mas tampilan menu lighbox nya, dengan begitu tampilannya jadi lebih menarik dan kelihatan bagus
BalasHapusiya gan, silahkan di terapin
Hapusjadi tambah keren ya kalau blog dipasang lighbox ini. bisa dicoba mas tutorialnya. Thanks
BalasHapussilahkan mbak, buat kepentingan tertentu
Hapusbiar tampilannya lebih menarik, bisa dipake buat apa aja. Jadi tampilan gk kayak window bawaan browser, tentunya jadi terlihat indah dan menarik.
BalasHapusbetu betul betul
langsung aja gan di pasang 
Hapusbagus banget mas dafin
nanti boleh dicoba
BalasHapusdi coba aja sob.. sesuka hati
Hapuswaah jadi tambah ilmu nih mengenai coding template makasih ya mas?
BalasHapussama sama mas gan, tanks sudah berkunjung
Hapuswah pasti sangat keren ya mas blog nya kalau diterapkan jquery lightbox evolution ini
BalasHapustidak juga mbak
BalasHapusMantap bro....
BalasHapussip
HapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>