Menerapakan jquery lightbox evolution

Menerapakan jquery lightbox evolution

HTML Javascript jQuery sitemap Trik

Salam sobat blogger membuat postingan untuk share kali ini buat sobat yang masih bingung tentang jquery lightbox evolution. jquery lightbox ini saya gunakan di template ini pada konversi kode dan kontak bisa sobat lihat seperti apa itu jquery lightbox.

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 sobat

1code-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/0B05MjHQkbOjhbVVpWUhzNHpSS0k

sekarang 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 ini

1code-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='{&quot;width&quot;:600, &quot;height&quot;:450, &quot;iframe&quot;: true}' href='link html yang telah di unggah di host'></a>

silahkan ubah ukuran nilai pada lebar width&quot;:600, dan tinggi height&quot;:450, sesuai keinginan atau kebutuhan

jadi 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='{&quot;width&quot;:600, &quot;height&quot;:450, &quot;iframe&quot;: true}' href='link html yang telah di unggah di host'>Demo lihat disini coi...</a></li>
</ul>
</div>
<div class="clear"></div>

untuk penerapan pada gambar,  video,  file swf tau banner boleh lihat kode di bwah ini

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....

Artikel Terkait

  • Daftar Isi Blog Tampilan Dinamis dengan jQuery
    Jika sebelumnya kita membahas daftar isi otomatis jquery navigasi maka sekarang kita coba membuat 'Daftar Isi Blog' dengan tampilan dinamis accroding dapat menggunakan jQuery seperti gambar di atas. Caranya gampang sobat Blogger, ikuti petunjuk berikut: 1. Login ke akun blogger anda 2. Pilih Entri Baru/Buat laman baru atau bisa menambahkan di…
  • Mengompress data Javascript tools YUI Compressor
    Mungkin blog tanpa javascript akan terasa biasa saja dan menjadi kurang menarik, itu semua menurut saya. karena dengan javascript kita dapat menciptakan hal - hal cantik dengan efek yang terlihat unik untuk sebuah tampilannya. dengan semakin majunya javascript berbagai hal yang terbilang berhubungan dengan blog kini banyak tercipta, bila anda …
  • Membuat Widget Numpage Navigasi untuk Komentar
    Komentar dengan Navigasi Widget Blogger adalah Widget untuk Komentar Anda. By Default Blogger Komentar ini memiliki navigasi halaman link (Terlama, Lama, Baru dan Terbaru) di bagian atas dan bawah bagian Komentar. Sementara pada pada Blogger yang Upgrade ke Threaded Comment, link pagination ini telah menghilang. Namun, Jika Anda ingin mengguna…
  • Membuat persentase ketika scroll digulung
    Mungkin trik ini terbilang tidak penting untuk mendukung apa pun di dalam blog, namun untuk anda para sobat yang suka dengan kreasi dan menambah unik tampilan, persentase scroll bisa dipasang sebagai hiasan. Dengan menambahkan persentase scroll, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll/ia gulung, jika penggulung…
  • Smooth scrolling pada komentar
    Sebenarnya efek smooth scrolling ini untuk menandai sebuah elemen di dalam komentar itu sendiri pada hash target komentar dengan jQuery dan beberapa tambahan css yaitu css target. lihat gambar dibawah ini: Untuk memasangnya pada komentar blog anda, silahkan ikuti langkah dibawah ini 1. Login ke akun blogger Anda. 2. Pilih Template » Ed…
  • Memasang efek animasi loading halaman blogger
    Sudah lihat animasi loading blog ini, itu adalah hasil dari efek animasi loading beforeunload. Kali ini kita membuat efek animasi yang ditampilkan bukan karena terpicu oleh momen klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang efek animasi loading ketika perpindahan halaman dengan cara in…

21 komentar

  1. Yahya Doank29 Maret 2014 pukul 07.09

    Waaah perlu di coba

    BalasHapus
  2. Almamater Jakarta29 Maret 2014 pukul 09.42

    keren gan, kapan-kapan dicoba yaa :)

    BalasHapus
  3. Dwi29 Maret 2014 pukul 10.51

    nanti saya coba gan :)

    BalasHapus
  4. Unknown29 Maret 2014 pukul 12.39

    keren mas tampilan menu lighbox nya, dengan begitu tampilannya jadi lebih menarik dan kelihatan bagus

    BalasHapus
  5. Wahyu Eka Prasetiyarini29 Maret 2014 pukul 20.05

    jadi tambah keren ya kalau blog dipasang lighbox ini. bisa dicoba mas tutorialnya. Thanks ;)

    BalasHapus
  6. Kang Mousir29 Maret 2014 pukul 21.01

    biar tampilannya lebih menarik, bisa dipake buat apa aja. Jadi tampilan gk kayak window bawaan browser, tentunya jadi terlihat indah dan menarik. :D

    BalasHapus
  7. Rz Bot31 Maret 2014 pukul 02.57

    bagus banget mas dafin :) nanti boleh dicoba

    BalasHapus
  8. Muhammad Adam Hussein, S.Pd31 Maret 2014 pukul 10.26

    waah jadi tambah ilmu nih mengenai coding template makasih ya mas?

    BalasHapus
  9. Wahyu Eka Prasetiyarini31 Maret 2014 pukul 20.06

    wah pasti sangat keren ya mas blog nya kalau diterapkan jquery lightbox evolution ini ;)

    BalasHapus
  10. Dafin defandaky1 April 2014 pukul 04.46

    tidak juga mbak :p

    BalasHapus
  11. wisata pisak30 Juni 2014 pukul 10.27

    Mantap bro....

    BalasHapus

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link 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>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...