Cara Memasang Image Lightbox Di Blogger AMP - OKB Hax
Dark
News Update
Loading...

Cara Memasang Image Lightbox Di Blogger AMP

Cara Memasang Image Lightbox Di Blogger AMP

Cara Memasang Image Lightbox Di Blogger AMP

Assalamualaikum, Kali ini saya akan bincangkan beberapa cara untuk memasang Image Lightbox di blogger yang menggunakan template amp.
Kita sedia maklum bahawa image lightbox sudahpun terasang di blogger tetapi image lightbox yang disediakan oleh blogger tidak dapat di gunakan kerana template yang kita gunakan adalah AMP, So saya akan berikan jalan penyelesaian untuk image lightbox AMP. Image Lightbox dapat berfungsi ketika gambar dalam sebuah artikel diklik, maka akan muncul sebuah overlay yang menampilkan gambar yang lebih besar. Jika gambar di dalam article tersebut lebih dari 1 gambar, overlay akan memaparkan kesemua gambar, kita hanya perlu click butang next or prev sahaja. Ini memudahkan para pengunjung blog kita untuk melihat gambar dengan lebih besar dan jelas.

Cara Memasang Image Lightbox Di Blogger AMP

Untuk mengaktifkan image lightbox di blogger, anda harus memasang javascript lightbox amp yang tlahpun di sediakan oleh amp project. Berikut code javascript yang perlu anda pasang di blogger anda:
<script async='async'custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
<script async='async' custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Selanjutnya anda perlu menambahkan code css lightbox ke dalam css style anda, Tambahkan ke dalam <style amp-custom='amp-custom'> .
amp-img[lightbox] {cursor: pointer;}
Setelah selesai memasang code code di atas, Silakan simpan template anda karna anda tlahpun selesai memasang image lightbox di blogger amp anda. Cara untuk menggunakan image lighybox di AMP adalah cara manual, di mana anda perlu memasang code berikut untuk menambahkan lightbox pada image anda. Inilah yang anda perlu hadapi sekiranya menggunakan template AMP. Berikut cara menambahkan css lightbox ke image:
<amp-img lightbox='lightbox' alt="amp lightbox" height='320px' layout="fixed-height" src="https://1.bp.blogspot.com/-Zjs5iIO2uGo/XGmTNQgF_aI/AAAAAAAABpE/uC8V0y_m5QMTLV5lOKNkr6UYvsPsGB9mQCLcBGAs/s700/Untitled-1.jpg"></amp-img>

Berikut demo Lightbox image di AMP

Lightbox Style 2

<center>
<amp-carousel width="400" height="300" layout="responsive" type="slides"> <amp-img src="https://1.bp.blogspot.com/-Zjs5iIO2uGo/XGmTNQgF_aI/AAAAAAAABpE/uC8V0y_m5QMTLV5lOKNkr6UYvsPsGB9mQCLcBGAs/s700/Untitled-1.jpg" width="400" height="300" layout="responsive" width="506" height="406"></amp-img> <amp-img src="https://2.bp.blogspot.com/-TPJEj8ZFT0A/XByWYIpXXdI/AAAAAAAAA7E/kHJV9JuKr0Yr8NP4IKrllN8ViFRMbQZ_wCLcBGAs/s1600/unnamed.png" width="400" height="300" layout="responsive" width="506" height="406"></amp-img> </amp-carousel>
</center>
Gantikan url gambar sesuai gambar anda.

Baiklah sampai di sini sahaja posting saya tentang cara memasang lightbox image di blogger, Saya harapkan apa yang saya kongsikan ini dapat membantu anda. Wasalam dari saya.
dottycat
“Don’t try to plan everything out to the very last detail. I’m a big believer in just getting it out there: create a minimal viable product or website, launch it, and get feedback.”

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel