Cara menambahkan Lightbox keren ke blogger (PrettyPhoto Lightbox)

Hai, bagaimana kabarmu? Saya harap Anda melakukan yang terbaik! Nah hari ini saya akan memberikan Cara menambahkan Lightbox keren ke blogger (PrettyPhoto Lightbox). Ini dibuat dari plugin lightbox jQuery yang disebut "PrettyPhoto". Baiklah, saya tidak akan membuang waktu untuk mengenalkannya lagi. Lihat saja demonya, itu akan mengatakan semuanya.

Petunjuk pemasangan

Jika ini yang Anda cari, ikuti langkah-langkah sederhana untuk Memasangnya.

1: Pergi ke Blog Anda Home> Template> Edit HTML
2: Tambahkan skrip jQuery. (Jika template Anda sudah memiliki skrip jQuery yang terpasang 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 kepala penutup </head>

<script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
       //]]>
       </script>

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