Ini adalah beberapa panduan dasar tentang penerapan dari tema Nubie Banget Versi AMP. Ada panduan cara membuat gambar di postingan, membuat galeri foto dengan carousel slider, dan lainnya yang tentunya sudah valid AMP.
Nubie banget Versi AMP
Tips Agar Gambar di Postingan Blog Valid AMP
Perlu diperhatikan, semua kode yang akan saya bagikan ini akan bekerja jika dilakukan pada Mode HTML di Editor postingan
Untuk yang pertama adalah cara penerapan gambar di postingan agar valid AMP. Kode HTML dari gambar yang diupload biasanya akan terlihat seperti ini
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQKxzkkBYPnLg_IsTGnEqYf_kQUNSeDeaPgTfHqBvFadBoFtWhcLIaahn0x6-nY_TP-LFTc2Zyc5Pzxi08S5ExukBUsgswm3BF5SX0h7LxmFxHvVP8qFYnTLtbjUvx9n4pFh8APZgA2c/s1600/Contoh+Gambar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQKxzkkBYPnLg_IsTGnEqYf_kQUNSeDeaPgTfHqBvFadBoFtWhcLIaahn0x6-nY_TP-LFTc2Zyc5Pzxi08S5ExukBUsgswm3BF5SX0h7LxmFxHvVP8qFYnTLtbjUvx9n4pFh8APZgA2c/s640/Contoh+Gambar.png" width="640" height="336" data-original-width="690" data-original-height="362" /></a></div>Kemudian ganti dengan format seperti ini
<noscript><img alt="ISI-DENGAN-KETERANGAN-GAMBAR" width="260" height="180" src="ISI-DENGAN-LINK-GAMBAR" title="ISI-DENGAN-JUDUL-GAMBAR" /></noscript>
<div class="separator img-w">
<amp-img data-original-height="900" data-original-width="1600" height="338" src="ISI-DENGAN-LINK-GAMBAR" width="600"></amp-img></div>Isi kode yang ditandai sesuai dengan link gambar Anda.
Contoh penerapan seperti ini
<noscript><img alt="Nubie banget Versi AMP" width="260" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQKxzkkBYPnLg_IsTGnEqYf_kQUNSeDeaPgTfHqBvFadBoFtWhcLIaahn0x6-nY_TP-LFTc2Zyc5Pzxi08S5ExukBUsgswm3BF5SX0h7LxmFxHvVP8qFYnTLtbjUvx9n4pFh8APZgA2c/s320/Contoh+Gambar.png" title="Nubie banget Versi AMP" /></noscript>
<div class="separator img-w">
<amp-img data-original-height="900" data-original-width="1600" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQKxzkkBYPnLg_IsTGnEqYf_kQUNSeDeaPgTfHqBvFadBoFtWhcLIaahn0x6-nY_TP-LFTc2Zyc5Pzxi08S5ExukBUsgswm3BF5SX0h7LxmFxHvVP8qFYnTLtbjUvx9n4pFh8APZgA2c/s600/Contoh+Gambar.png" width="600"></amp-img></div>Perhatikan kode s320 dan s600 pada kode di atas, ganti juga kode yang sebelumnya s1600. Atau bisa juga dengan kode ini
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
<amp-img alt="images" on="tap:lightbox1" role="button" tabindex="0" layout="responsive" src="ISI-DENGAN-LINK-GAMBAR" width="750" height="450"></amp-img>Membuat Carousel Slider di Dalam Postingan
Tambahkan kode di bawah ini di dalam postingan
<amp-carousel width="600" height="400" layout="responsive" type="slides">, <amp-img src="ISI-DENGAN-LINK-GAMBAR" width="600" height="400" layout="responsive" alt="ISI-DENGAN-KETERANGAN-GAMBAR"></amp-img> <amp-img src="ISI-DENGAN-LINK-GAMBAR" width="600" height="400" layout="responsive" alt="ISI-DENGAN-KETERANGAN-GAMBAR"></amp-img> <amp-img src="ISI-DENGAN-LINK-GAMBAR" width="600" height="400" layout="responsive" alt="ISI-DENGAN-KETERANGAN-GAMBAR"></amp-img> </amp-carousel>Contohnya seperti ini
Embed Video Youtube di Dalam Postingan
Untuk menambahkan video youtube di dalam postingan, silakan tambahkan kode ini
<amp-youtube width="480" height="270" layout="responsive" data-videoid="RK1K2bCg4J8"></amp-youtube>Ganti kode yang ditandai dengan kode ID dari video yang ingin ditambahkan. Contoh penerapannya seperti ini