Cara Memasang Lightbox Di Blogger

Hello , jumpa lagi ..

kali ini saya akan membagikan tutorial cara memasang lightbox pada tampilan gambar di blogger, lightbox yang saya share kali ini sebenarnya merupakan plugin light gallery atau image gallery untuk sebuah website, yang di buat oleh SachinN di github.
namun saya rasa fungsinya hampir sama dengan lightbox pada blogger.

Adapun fitur yang terdapat pada lightbox ini yaitu support responsive, gallery gambar yang bisa di geser, tampilan yang lebih menarik, transisi yang lebih smooth, tombol untuk mendonwload gambar, tombol fullscreen serta fitur lainnya yang tidak di miliki lightbox standar blogger.

Untuk lebih jelasnya silahkan lihat demo dibawah ini 

Demo

Jika anda berminat untuk memasang lightbox ini pada blog anda, silahkan simak tutorial berikut

Cara Memasang Lightbox ( Image Gallery ) Pada Blogger

Oky sebelum menambahkan lightbox ( image gallery ) sebaiknya nonaktifkan lightbox standar blogger pada menu setelan 

setelah itu buka template editor ( tema -> edit Html ) , kemudian tambahkan script dibawah tepat sebelum kode penutup body ( </body> )

<!-- Lightbox -->

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

tapi bagi anda yang telah melakukan beberapa optimasi gambar seperti menghilangkan imageanchor="1" dan mengganti border="0" dengan style="border:none;". silahkan gunakan script dibawah

<!-- Lightbox -->

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

setelah itu ganti semua kode

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

dengan

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

Terakhir klick "Simpan Tema"

Akhir Kata 

Itulah artikel mengenai Cara Memasang Lightbox Di Blogger, Perlu anda Ketahui artikel ini adalah artikel hasil revisi saya dari berbagai sumber, jadi jika ada kesamaan kata dengan artikel lainnya mohon dimaafkan. semoga artikel ini dapat bermanfaat bagi anda semua.

apabila anda memiliki pertanyaan, kritik ataupun saran mengenai artikel ini silahkan hubungi saya melalui halaman contact admin atau dengan memberi komentar dibawah ini.

see you next time

Bagikan Artikel ini