Cara Membuat JQuery Lightbox di Blog

Ditulis oleh: -
Cara Membuat JQuery Lightbox
DEMO
Lightbox - merupakan sebuah kotak yang akan muncul pada saat gambar, video, iframe, dll diklik. Lightbox ini sebenarnya sudah ada pada bawaan blogger. Namun, pada bawaan blogger mungkin akan terlalu mainstream untuk blog anda. Untuk membuat sebuah lightbox yang lebih bagus lagi anda mungkin perlu beberapa ramuan berikut ini. Tutorial ini saya ambil dari blog OmDayz.

Cara Membuat JQuery Lightbox di Blog

1. Letakkan kode berikut tepat di atas </head>
<b:if cond='data:blog.pageType == "item"'><script src='http://data.sjutait.com/jquery-1.7.min.js' type='text/javascript'/><script src='http://data.sjutait.com/jquery.lightbox.js' type='text/javascript'/><script src='http://data.sjutait.com/imagenvideo.js' type='text/javascript'/><link href='http://data.sjutait.com/jquery-lightbox.css' rel='stylesheet' type='text/css'/><!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://data.sjutait.com/jquery-lightbox-ie6.css" /><![endif]-->  </b:if>

2. Letakkan kode berikut tepat di atas </body>
<b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>  jQuery(document).ready(function(){    $('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightbox();  });</script></b:if>

3. Simpan template

17komentar:

  1. keren!

    blogx dah aq follow, folbek ya.., thx *smile

    ReplyDelete
  2. Wah saya belum pernah buat jquery mas, tapi boleh juga nich tutorialnya untuk dicoba :)

    ReplyDelete
    Replies
    1. saya juga belum pernah buat jquery, tutorialnya sangat bermanfaat sekali :)

      Delete
  3. Keren sob... ini yang saya cari
    Kalau ditaruh di objek lain selain pada gambar gimana caranya ya ??

    ReplyDelete
  4. wah keren juga nih sob jquery lightboxnya menarik sekali, makasih udah berbagi disini :)

    ReplyDelete
  5. keren mas, isin jambrek scriptnya :D
    - salam damai

    ReplyDelete
  6. wah ini yg saya cari cari mas :D

    ReplyDelete
  7. JQuery Lightbox fungsinya buat apa ya, Sob?

    ReplyDelete
  8. Wah keren nih sob, kapan" bisa nih ane peraktekin. Makasih gan

    ReplyDelete
  9. keren banget lightboxnya,, maaf oot mas, mas saya pengen berguru ke mas. pengen belajar seo, template responsive ke mas

    ReplyDelete
  10. wah keren nih, kapan2 saya coba deh :D

    ReplyDelete
  11. wih keren ya sob...jadi pengen ikut comot juga :D

    ReplyDelete
  12. ane belum tahu bedanya sama yg bawaan blogger. kelihatannya kog sama aja ya?
    "e,e

    ReplyDelete
  13. baru tau kayak gini sob, ijin copy kodenya

    ReplyDelete
  14. kang kalo Jquery Lightbox iframe nya gmn bukan gambar tp berbentuk html?? carannyaa ?

    ReplyDelete