Cara menambahkan kode Light Gallery di Tema Blogger

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

Light Gellery adalah plugin untuk sebuah website dibuat oleh sachinchoolur di Github. untuk fungsi menurut saya hampir sama dengan lightbox yang sudah ada di blogger, namun dengan fitur yang lebih baik. Seperti sudah support Responsive, galeri gambar yang digeser, tampilan yang lebih menarik, tombol untuk mendownload gambar dan tombol fullscreen, transisi yang lebih smooth, serta kelebihan lainya yang tidak dimiliki Ligtbox standar Blogger.

Untuk menambahkan ke dalam Blog sobat , silahkan ikuti cara menambahkan Light Gallery di tema Blog berikut ini :
Sebelum menambahkan Light Gallery sebaiknya nonaktifkan Lightbox standar Blogger di setelan

Pertama buka Template edit Blogger, tambahkan kode dibawah 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 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 , silahkan bungkus kode diatas dengan Tag Kondisonal

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 di bawh ini :

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

Simpan Template

• Demo Link
• Responsive

Share this post