Cara Memasang Fancybox Pada Blogspot


FancyBox adalah salah satu alternatif LightBox yang sering digunakan untuk menampilkan gambar dengan cara lebih cantik dan menarik. Sebenarnya platform Blogger memiliki lightbox bawaan yang bisa dibilang cukup menarik. Tetapi entah kenapa, Lightbox bawaan Blogger ini tidak bisa bekerja pada template yang saya gunakan.
Karena tidak memiliki Lightbox, blog zdienos agak kurang menarik jika saat kita mengklik gambar, lantas yang terbuka adalah URL dari gambar tersebut, dan harus menekan tombol back untuk kembali membaca artikel. Olehnya itu, saya akan coba tunjukkan bagaimana cara memasang FancyBox pada blogspot, sekalian diterapkan pada blog zdienos.
Disable LightBox Bawaan BlogspotSebelum memulai, ada baiknya (atau mungkin sebaiknya) kita men-disable Lightbox bawaan blogspot, biar gak bentrok nantinya. Untuk men-disable lightbox cukup mudah, buka dashboard Blogger Anda tentunya, kemudian pilih Setting -> Post, comments and sharing. Pada bagian showcase image with Lightbox, pilih No.
Memasang Script FancyBoxScript FancyBox yang saya gunakan pada tutorial ini adalah masih versi 3.1.25, sedangkan pada situs resmi, sudah versi 3.5.7. Tentunya pada versi terbaru ini sudah banyak fitur-fitur yang telah dikembangkan .Silahkan merujuk ke dokumentasi FancyBox pada situs resmi untuk penggunaan FancyBox lebih lanjut (http://fancyapps.com/fancybox/3/).

Oke, saatnya memasang script FancyBox, kembali ke dashboard blogger, pilih theme lalu edit theme. Silahkan copy dan paste script style css di bawah ini, tepat di atas tag penutup HEAD.
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- FancyBox CSS -->
<link href='http://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>
</b:if>Ada sedikit modifikasi dari saya, yakni dengan menambahkan conditional if, dimana script css tersebut hanya akan diloading, jika yang dibuka adalah bukan halaman utama blog. Tips ini akan sedikit mengurangi beban blog saat loading tentunya.

Selanjutnya silahakan copy dan paste script utama FancyBox di bawah ini, dan letakkan tepat di atas tag penutup BODY.
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>

<!-- FancyBox 3 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".post-body a img").each(function(){
var isImage = /\.(?:jpg|jpeg|gif|png)$/i.test( $(this).parent("a").attr("href") );
if ( isImage ) {
$(this).parent("a").attr('data-src', $(this).parent("a").attr("href"));
$(this).parent("a").attr('data-fancybox', 'fancy-box' );
}
else {
}
});
$("[data-fancybox]").fancybox({
infobar : true,
arrows : false,
animationEffect : "fade",
transitionEffect : "slide",
speed : 300,
margin : [40, 20]
});
});
//]]>
</script>
</b:if>Sama seperti script Stylesheet CSS sebelumnya, script utama ini saya tambahkan conditional if, sehingga hanya akan diload jika yang diakses adalah bukan halaman utama. Di script ini juga bisa dilakukan kustomisasi seperti efek animasi, transisi dan sebagainya. Silahkan baca dokumentasi pada situs resmi FancyBox. Jangan lupa simpan perubahan yang telah dilakukan pada template blogspot.
SelesaiJika tidak ada kesalahan, harusnya FancyBox sudah berjalan dengan baik pada blogspot. Silahkan buka salah satu postingan yang memiliki gambar. Kemudian klik gambar tersebut. Kira-kira begini penampakan FancyBox tadi.


Hasilnya sangat bagus menurut saya, bahkan ada fitur fullscreen, slideshow dan show thumbnailnya. Mudah-mudahan dengan penambahan script FancyBox, pengunjung blog bisa lebih betah.

Sekian saja postingan kali ini, jangan lupa komentar, like dan follow/subscribe sosial media blog zdienos.

Terima kasih,
(z)

Artikel ini hanyalah simpanan cache dari url asal penulis yang berkebarangkalian sudah terlalu lama atau sudah dibuang :

http://blog.zdienos.com/2019/03/cara-memasang-fancybox-pada-blogspot.html

Kempen Promosi dan Iklan
Kami memerlukan jasa baik anda untuk menyokong kempen pengiklanan dalam website kami. Serba sedikit anda telah membantu kami untuk mengekalkan servis percuma aggregating ini kepada semua.

Anda juga boleh memberikan sumbangan anda kepada kami dengan menghubungi kami di sini
Cara Memasang Related Post Di Bawah Iklan Tengah Postingan Blog

Cara Memasang Related Post Di Bawah Iklan Tengah Postingan Blog

papar berkaitan - pada 25/3/2019 - jumlah : 409 hits
Sebelumnya CB sudah share cara memasang related post di tengah postingan blog dan cara pasang iklan di tengah artikel Tips kali ini menggabungkan keduanya yaitu manampilan Related Post di bawah iklan yang ada di tengah tulisan atau posting ...
Cara Melayan Tetamu Mengikut Cara Islam

Cara Melayan Tetamu Mengikut Cara Islam

papar berkaitan - pada 13/3/2019 - jumlah : 565 hits
Sebagaimana ada adab menjadi tetamu begitu juga ada ada menjadi tuan rumah Bahkan menjaga adab sebagai tuan rumah barang kali lebih utama Hal ini kerana nabi menjelaskan Cara Melayan Tetamu Mengikut Cara IslamCredit pic Sesiapa yang beriman...
5 Cara Ekstrem Psk Pikat Pelanggannya Ada Yang Pakai Darah Belut Biar Dikira Perawan Coba

5 Cara Ekstrem Psk Pikat Pelanggannya Ada Yang Pakai Darah Belut Biar Dikira Perawan Coba

papar berkaitan - pada 13/3/2019 - jumlah : 266 hits
Miris sekaligus kasihan sih Cuma biar dapat duit mereka rela melakukan hal hal ekstrem yang tak masuk di akal
Cara Pengiraan Bilangan Bata Dan Simen

Cara Pengiraan Bilangan Bata Dan Simen

papar berkaitan - pada 13/3/2019 - jumlah : 561 hits
CARA PENGIRAAN BATA 1 IKATAN STRETCHER DATAR BATA Cari keluasan tembok iaitu Panjang x tinggi tembok Panjang 5m dan tinggi 3m 5 m x 3 m 15m 15 m x 60 biji ketul Jumlah bata 900 ketul Mortar Ada dua kaedah pengiraan mortar iaitu 1 Berpanduka...
Cara Mudah Semak Check Baki Akaun Asnb

Cara Mudah Semak Check Baki Akaun Asnb

papar berkaitan - pada 13/3/2019 - jumlah : 635 hits
Hai Tengah tunggu Dividen ASNB ke tu Tau tak nak semak baki ASNB kini dihujung jari Buat mereka yang sudah membuka akaun ASNB kini tidak susah lagi jikalau tuan puan nak semak baki semasa ASNB Sudah boleh semak online melalui Portal MyASNB ...
Cara Mudah Buat Burger Homemade Yang Sihat Untuk Anak Anak

Cara Mudah Buat Burger Homemade Yang Sihat Untuk Anak Anak

papar berkaitan - pada 13/3/2019 - jumlah : 891 hits
Kanak kanak mungkin lebih tertarik pada makanan segera fast food mereka yang dewasa apa kurangnya Tetapi makanan segera fast food sememangnya tidak bagus jika diamalkan dimakan selalu Jika ingin lebih rasa selamat serta yakin apa kata kami ...
4 Cara Menghindari Munculnya Trauma Berkepanjangan Pada Diri Seseorang

4 Cara Menghindari Munculnya Trauma Berkepanjangan Pada Diri Seseorang

papar berkaitan - pada 13/3/2019 - jumlah : 224 hits
Berbagai guncangan atau masalah yang terjadi dalam hidup bisa menimbulkan trauma atau dampak psikologis pada kehidupan seseorang Walau pada beberapa orang hal ini bisa dilupakan dan diselesaikan dalam jangka waktu cepat namun tak jarang tra...
Cara Kupas Telur Rebus Paling Pantas

Cara Kupas Telur Rebus Paling Pantas

papar berkaitan - pada 13/3/2019 - jumlah : 331 hits
MichaMedia telah mencari cara berkesan untuk mengupas kulit telur rebus Caranya adalah dengan memasukan telur ke dalam gelas minum kecil tambah sedikit air dan goncang dengan kuat selama beberapa saat Jom saksikan video berikut ini
Tips Cara Nak Tanggani Anak Tantrum Di Khalayak Ramai

Tips Cara Nak Tanggani Anak Tantrum Di Khalayak Ramai

papar berkaitan - pada 14/3/2019 - jumlah : 467 hits
TIPS CARA NAK TANGGANIANAK TANTRUM DI KHALAYAK RAMAIHai Selamat pagi semua hari ni TB nak share tentang satu post ni yang menceritakan tentang tips serat cara nak tanggani anak tantrum dikhalayak ramai Benda ni memang tak semua parent akan ...
What We Know So Far About The Putra Heights Inferno

Hiburan Mangsa Terjejas Akibat Kebakaran Di Putra Height Akan Terima Bantuan Rm2500 Hingga Rm5000 Pmx

Wanita Maut Ditikam Suami Di Leher

Affected Residents Tend To See Putra Heights Gas Pipeline Tragedy As A Waiting To Happen Man Made Disaster

Berdentum Gegaran Disangka Pesawat Terhempas Mangsa Kebakaran

Zafrul As Bam President Filling Big Shoes Or A Risky Gamble

Monoloque Rindu Dendam Hari Raya Chord

Perempuan Melawan Lara


echo '';
Info Dan Sinopsis Drama Berepisod Dendam Seorang Madu Slot Tiara Astro Prima

10 Fakta Biodata Amira Othman Yang Digosip Dengan Fattah Amin Penyanyi Lagu Bila Nak Kahwin

5 Tips Macam Mana Nak Ajak Orang Kita Suka Dating Dengan Kita

Info Dan Sinopsis Drama Berepisod Keluarga Itu Slot Lestary TV3

Bolehkah Manusia Transgender Mencapai Klimaks Selepas Bertukar


Soodaap Fish Chip Viral Tepi Jalan Je

Gempa Myanmar Penyelamat M Sia Keluarkan Seorang Mangsa Masih Hidup

Apa Yang Perlu Tahu Tentang Masa Depan Tiktok Di As Dan Siapa Yang Berminat Membelinya

Selamat Hari Kesedaran Autisme Sedunia Penting Untuk Kita

Projek Itu Melalui Kelulusan Yang Sewajarnya Termasuk Mendapat Kebenaran Petronas Datuk Bandar Subang Jaya

Makluman Mangsa Insiden Kebakaran Saluran Paip Gas Di Putra Heights Telah Menerima Rawatan Yang Sewajarnya Dari Kkm