Menulis artikel di Template AMP pada blogspot

Kali ini kita bahas tentang bagaimana caranya menulis artikel di blog dengan template AMP pada blogspot. Ini di karenakan blogspot sebenarnya tidak suport AMP jadi untuk menulis artikel pun kita harus memahami apa yang tidak boleh tampil di halaman AMP.

Sedikit ribet ya, tapi inilah tantangannya untuk bagaimana kita sebagai blogger dengan keterbatasan modal ingin tampil tidak kalah dengan yang bermodal.

Langsung saja pada pokok bahasan ya.

Cara menulis artikel di blog dengan template AMP


Pertama yang harus kita tahu bahwa AMP adalah opensource yang di kembangkan oleh google dkk yang memungkinkan web atau blog dapat berjalan cepat pada browser. Ini semua bertujuan untuk mengurangi tingkat bounce rate yang tinggi untuk sebuah blog.

Karena menurut google sendiri blog dengan lama loading melebihi 3 detik akan di tinggalkan oleh pengunjung sebanyak 53%.

Kan sayang kalau hal itu terjadi, jadi bagaimanapun caranya kita meski pengguna blogspot bisa mencoba kecanggihan AMP ini.



Download template AMP blogspot

Untuk menulis artikel pada format khusus template AMP berarti di sini saya mengasumsikan bahwa anda sudah memiliki template AMP pada blognya dan sudah menerapkannya.

Artikel ini sebenarnya bahasanya luas tapi di cicil saja ya, karena ini updatenya hanya lewat hp, lagi pengen yang praktis saja.

Hilangkan Inline Style pada mode penulisan Artikel


Bagi sahabat yang pernah mengalami kebingungan ketika menulis atau update artikel tetapi justru membuat template AMPnya tidak valid mungkin ini adalah penyebabnya.

Jadi untuk penulisan artikel pada template AMP pada blogspot kita tidak perlu menggunakan mode compose, melainkan kita menggunakan mode HTML.

Kenapa begitu? Karena mode compose akan secara otomatis mengeluarkan tag div berisi inline style yang itu di larang oleh elemen AMP.

Bentuknya seperti ini :

<div dir="ltr" style="text-align: left;" trbidi="on">

</div>

Atau untuk lebih jelasnya bisa lihat gambar berikut ini :

Cara menulis artikel di blog dengan template AMP
Editor Blogspot

Nah kode dengan awalan div tersebut hapus atau hilangkan, jadi oleh karena itu untuk penulisan artikel pada template AMP kita harus lewat mode HTML.

Cara menambahkan gambar di template AMP pada blogspot


Sama halnya dengan cara penulisan artikel untuk menambahkan gambar kitapun wajib menggunakan tag img khusus AMP. Biasanya kalau html biasa hanya img saja, sedang jika di AMP akan berubah menjadi amp-img.

Cara mengatasinya adalah :

Upload terlebih dahulu gambar untuk artikel yang akan di buat, semuanya agar tidak bolak balik ke mode compose. Karena hanya akan capek kita mengahapus tag div tribidi tersebut.

Setelah anda upload semua gambar, kemudian edit kode pada gambar tersebut dengan yang kompatibel untuk AMP.

Seperti ini :

<amp-img height="350" width="720" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIkI145qDudDXcCwLMPZBfH3FcPOW7R9mtoXq9EjhnH0NbgL5WGL6hj9yuwTcr3H9rr4sVNqQ03Mey9kxic-nhCKvgjIpjK2S4OWlSnssXgBqmOJosT3WyQFYgpeTEvKdB1b02KHaVv2vN/s320/Screenshot_2018-03-01-15-42-09-42.png"></a></amp-img>

Pastikan sebelum publish artikel semua elemen pada tulisan tidak lagi tag div inline tribidi atau lainnya yang tidak kompatibel dengan AMP.



Sekarang silahkan di coba dulu, jika ada masih timbul kesalahan kembali lagi kesini.

Demikian artikel singkat tentang bagaimana cara menulis artikel di blog dengan template AMP pada blogspot. Semoga bermanfaat dan berguna.
Akhwan Beud
Hanya orang biasa yang suka dengan dunia blogging. Mengelola lebih dari 350 Blog yang tersebar di berbagai Negara.

Related Posts