Contoh Banner

Yang Harus Diperhatikan Saat Merubah Template Menjadi Valid AMP HTML

Yang Harus Diperhatikan Saat Merubah Template Menjadi Valid AMP HTML
Yang Harus Diperhatikan Saat Merubah Template Menjadi Valid AMP HTML

Saat ini Responsive Design Template mulai ditinggalkan dan beralih ke AMP HTML yang menggunakan instan loading sehingga tak diragukan lagi kecepatannya. Yah karena alasan tersebut satu per satu kaum blogger mulai menggunakan template valid AMP HTML meski harus edit postingan satu per satu. Sebenarnya sudah banyak yang tahu bahkan sudah banyak postingan yang membahas tentang bagaimana cara merubah custom template menjadi valid AMP HTML, tapi disini saya fokus pada area gambar postingan saja / thumbnail karena ada dua pilihan yang berbeda saat edit postingan untuk gambar yang menjadi thumbnail / gambar pertama.

Meski banyak pilihan template, tapi dalam masalah edit gambar ada dua pilihan tergantung template yang digunakan. Ada template yang menampilkan thumbnail di dalam postingan, dan ada juga yang menampilkan thumbnail diluar postingan seperti kebanyakan template kompiajaib. Jadi saat kita edit postingan harus juga memperhatikan template apa yang kita gunakan supaya tidak mengedit dua kali.

Oke disini saya contohkan langsung saja yah. Seperti saya katakan bahwa ada dua pilihan penulisan kode untuk gambar berikut ini:

Kode pertama

<noscript><img alt="ALT-GAMBAR" height="350" src="URL-GAMBAR"  title="TITLE-GAMBAR" width="600"/></noscript>

Kode kedua

<noscript><img alt="ALT-GAMBAR" height="350" src="URL-GAMBAR"  title="TITLE-GAMBAR" width="600"/></noscript>

<amp-img alt="ALT-GAMBAR" height="350" layout="responsive" src="URL-GAMABR" title="TITLE-GAMBAR" width="600"></amp-img>

Kode pertama digunakan untuk template yang menampilkan thumbnail diluar postingan (seperti template kompi ajaib), sedangkan kode kedua untuk template yang menampilkan thumbnail di dalam postingan.

Karena itu jika kita menggunakan template yang menampilkan thumbnail diluar postingan, maka kita cukup menggunakan kode pertama untuk gambar. Tapi jika template blog kita menampilkan thumbnail di dalam postingan, kita harus menggunakan kode kedua untuk gambar sebagai thumbnail. Dan tidak boleh sebaliknya.

Misalnya saat ini blog saya menggunakan template dari kompiajaib yang menampilkan thumbnail diluar postingan, maka saat edit postingan harus menggunakan kode pertama untuk thumbnail. Ketika suatu saat saya mau ganti template, saya harus memilih template yang juga menampilkan thumbnail diluar postingan. Jika tidak, maka saya harus edit postingan lagi menggunanakan kode kedua.

Begitulah pengalaman yang bisa saya share. semoga bermanfaat...
Advertisement

Catatan:

File yang kami bagikan kami simpan di google drive, jika file format word dan excel dialihkan ke aplikasi google doc maka unduh / save as dulu ya. Namun jika kesulitan, silahkan baca cara downloadnya