Membuat Galeri Foto Lightbox di Blogger

Galeri Foto Lightbox di Blogger
Petunjuk pemasangan
Jika ini yang Anda cari, ikuti langkah-langkah sederhana untuk membuatnya.

1. Buka Beranda Blog Anda > Template> Edit HTML

2. Tambahkan scrip jQuery. (Jika templat Anda sudah memiliki skrip jQuery yang terinstal maka lewati langkah ini.)

Tempatkan kode berikut tepat sebelum tag kepala penutup </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

3. Tambahkan plugin PrettyPhoto.
Tempatkan kode berikut tepat sebelum tag penutup </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js' type='text/javascript'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/css/prettyPhoto.min.css' rel='stylesheet' type='text/css'/>

4: Inisialisasi Lightbox (Langkah terakhir)
Tempatkan kode berikut tepat sebelum tag penutup </body>
<script type='text/javascript'>
  $(&quot;.post-body&quot;).each(function(i) {
      $(this).find(&quot;img&quot;).closest(&#39;a&#39;).attr(&quot;rel&quot;, &quot;prettyPhoto[gallery&quot; + (i + 1) + &quot;]&quot;);
  });
</script>
<script charset='utf-8' type='text/javascript'>
  $(document).ready(function(){
      $(&quot;.post-body a[rel^=&#39;prettyPhoto&#39;]&quot;).prettyPhoto({
          animation_speed:&#39;normal&#39;,
          slideshow: 5000, 
          theme: &#39;pp_default&#39;,
          autoplay_slideshow: true
      });
  });
</script>

Selamat! Anda telah berhasil membuat Lightbox PrettyPhoto, Tepuk tangan!


0 Balasan Untuk "Membuat Galeri Foto Lightbox di Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel