Memasang Lightbox Dengan Efek Fancy Box di Blogger

SatuAja : Tampilan fancy box tentu tidak asing karena terlihat menarik dengan efek yang menyerupai galeri ponsel. Kali ini kita akan memasang efek fancy box pada blogger dan akan muncul ketika pengunjung klik gambar dalam postingan kita.

Fancy box sendiri memiliki beberapa fitur seperti menampilkan gambar dalam slide, zoom, search, download dan juga navigasi kanan dan kiri pada tampilan fullscreen.

Cara Memasang Lightbox Gambar Postingan Dengan Efek Fancy Box di Blogger

Langkah pertama masuk ke menu Setelan Blogger lalu OFF-kan tombol pengaturan Lightbox Gambar.

Kemudian masuk ke menu Tema > Edit HTML. Copy kode dibawah ini dan paste diatas kode </head> atau </head>.

<script src='https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Kemudian masukkan kode berikut ini juga diatas kode </head> atau </head>.

<!--Lightbox-->
<b:if cond='data:view.isSingleItem'>
<style>
@media screen and (max-width:640px) {
body .fancybox-slide--image{overflow-y:scroll}}
</style>
</b:if>
<!--end-->

Selanjutnya cari kode </body> atau </body> dan masukkan kode berikut diatasnya.

<!--Lightbox-->
<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
// Lazy Fancy Box
var lazyfancybox=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyfancybox||0!=document.body.scrollTop&&!1===lazyfancybox)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyfancybox=!0)},!0);
// CSS Fancy Box
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css");
// Fancybox Setting
$(document).ready(function(){$(".post-body img").parent("a:not(.no-lightbox)").each(function(){$(this).attr("src",$(this).find("img").attr("src")),$(this).attr("data-fancybox","postimages")}),$(".post-body img").parent("a:not(.no-lightbox)").fancybox({margin:[50,0],onComplete:function(t,o){t.scaleToActual(0,0,0),console.log(t)}})});
//]]>
</script>
</b:if>
<!--end-->

Perhatikan tulisan dalam kode yang berwarna kuning yaitu post-body. Silahkan ubah jika template blog anda menggunakan kode markup yang berbeda.

Selesai, simpan template. Untuk melihat hasilnya silahkan buka salah satu potingan anda dan klik gambar yang ada didalam postingan.