Cara Menambahkan Light Gallery di Tema Blog - Arlina Design
Light Gallery ini berfungsi untuk menampilan galeri dari gambar atau video saat kita membuka gambar atau video pada blog.

Cara Menambahkan Light Gallery di Tema Blog

Light Gallery adalah plugin untuk sebuah website dibuat oleh Sachin N di Github. Untuk fungsi menurut saya hampir sama dengan Lightbox yang sudah ada di Blogger, namun dengan fitur yang lebih baik. Sperti sudah support Responsive, galeri gambar yang bisa digeser, tampilan yang lebih menarik, tombol untuk mendownload gambar dan tombol fullscreen, transisi yang lebih smooth, serta kelebihan lainnya yang tidak dimiliki Lightbox standar Blogger.

Untuk menambahkannya ke dalam blog sobat, silakan ikuti Cara Menambahkan Light Gallery di Tema Blog berikut ini

Cara Menambahkan Light Gallery di Tema Blog


Sebelum menambahkan Light Gallery sebaiknya nonaktifkan Lightbox standar Blogger di Setelan

Cara Menambahkan Light Gallery di Tema Blog

Pertama buka Template Editor blog, tambahkan kode di bawah ini tepat sebelum body penutup template seperti ini </body>

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[imageanchor]"});
//]]>
</script>

Bagi yang sudah mengoptimasi gambar pada postingan Beberapa Optimasi Artikel Blog dengan menghilangkan imageanchor="1" dan mengganti border="0" dengan style="border: none;", gunakan kode di bawah ini

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[style]"});
//]]>
</script>

Jika hanya ingin menampilkan pada halaman tertentu, silakan bungkus kode di atas dengan Tag Kondisional

Kemudian cari post-body seperti ini

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Kode di atas bisa berbeda tergantung tema yang digunakan.

Ganti dengan kode ini

<div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>

Simpan template dan selesai. Untuk melihat hasilnya klik tombol di bawah ini


Untuk pengaturan lebih lengkapnya, sobat bisa kunjungi link ini


Sekian dari saya, selamat mencoba.

Cara Menambahkan Light Gallery di Tema Blog

Light Gallery ini berfungsi untuk menampilan galeri dari gambar atau video saat kita membuka gambar atau video pada blog.

Cara Menambahkan Light Gallery di Tema Blog

Light Gallery adalah plugin untuk sebuah website dibuat oleh Sachin N di Github. Untuk fungsi menurut saya hampir sama dengan Lightbox yang sudah ada di Blogger, namun dengan fitur yang lebih baik. Sperti sudah support Responsive, galeri gambar yang bisa digeser, tampilan yang lebih menarik, tombol untuk mendownload gambar dan tombol fullscreen, transisi yang lebih smooth, serta kelebihan lainnya yang tidak dimiliki Lightbox standar Blogger.

Untuk menambahkannya ke dalam blog sobat, silakan ikuti Cara Menambahkan Light Gallery di Tema Blog berikut ini

Cara Menambahkan Light Gallery di Tema Blog


Sebelum menambahkan Light Gallery sebaiknya nonaktifkan Lightbox standar Blogger di Setelan

Cara Menambahkan Light Gallery di Tema Blog

Pertama buka Template Editor blog, tambahkan kode di bawah ini tepat sebelum body penutup template seperti ini </body>

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[imageanchor]"});
//]]>
</script>

Bagi yang sudah mengoptimasi gambar pada postingan Beberapa Optimasi Artikel Blog dengan menghilangkan imageanchor="1" dan mengganti border="0" dengan style="border: none;", gunakan kode di bawah ini

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/>
<link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
$('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[style]"});
//]]>
</script>

Jika hanya ingin menampilkan pada halaman tertentu, silakan bungkus kode di atas dengan Tag Kondisional

Kemudian cari post-body seperti ini

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Kode di atas bisa berbeda tergantung tema yang digunakan.

Ganti dengan kode ini

<div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>

Simpan template dan selesai. Untuk melihat hasilnya klik tombol di bawah ini


Untuk pengaturan lebih lengkapnya, sobat bisa kunjungi link ini


Sekian dari saya, selamat mencoba.

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo