Cara Memasang Lightbox Keren Di Blogger


Cara Memasang Lightbox Keren Di Blogger

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

Cara Memasang Lightbox Keren Di Blogger


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

Cara Memasang Lightbox ( Image Gallery ) Yang Keren Di Blogger



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

Cara Memasang Lightbox Keren Di Blogger

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 atau dengan memberi komentar dibawah ini.

see you next time and happy blogging

Berlangganan update artikel terbaru via email:

0 Response to "Cara Memasang Lightbox Keren Di Blogger"

Posting Komentar

Jika Ada Yang Ingin Anda Tanyakan Terkait Artikel Ini Silahkan Bertanya Melalui Kolom Komentar Dibawah, Atau Dengan Menghubungi Kami Pada Halaman Contact.

1. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel