Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP
Monday, 28 November 2016
Edit
Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP - Menggunakan template AMP tentu bukan hal yang mudah terutama bagi blogger pemula seperti saya. Banyak aturan yang perlu diperhatikan supaya blog dengan template AMP benar-benar valid AMP. Mengingat AMP belum lama diluncurkan mungkin masih banyak yang merasa asing dengan aturan AMP.
Saya rasa setiap blogger yang menggunakan template AMP pasti mengalami kesulitan dengan aturan yang ada. Berbeda dengan template selain AMP yang umumnya sudah digunakan blogger selama bertahun-tahun. Mungkin sebab sudah berkembang lama sehingga penggunaannya lebih mudah.
Halaman ini saya buat untuk mempermudah saya membuat postingan dan sebagai arsip saya mempelajari template AMP. Kustomisasi ini saya dapat dari Kompi Ajaib ketika saya membelinya.
Membuat postingan atau menulis artikel adalah kegiatan yang paling sering dilakukan oleh bogger dalam mengembangkan blognya, apa lagi kalau tidak membuat postingan. Tetapi untuk membuat posting supaya valid AMP saya rasa memang cukup merepotkan terlebih ketika menyisipkan gambar dan video. Oleh karena itu halaman ini saya buat dan semoga bisa membantu blogger lain yang masih pemula seperti saya. Awalnya mungkin memang sulit tetapi jika sudah terbiasa pasti jadi mudah.
Perlu diingat bahwa di dalam postingan tidak boleh ada tag HTML dengan CSS inline seperti <div style="text-align: justify;"></div> ataupun lainnya. Untuk mengatasinya kita bisa menambah kode CSS pada template sebagai berikut .center {text-align: justify;} kemudian mengganti <div style="text-align: justify;"></div> menjadi <div class="justify"></div>. Meskipun saya masih belum bisa tetapi saya rasa ini diperlukan sebagai catatan saya.
Update! Jika teman-teman masih bingung ketika ingin menambah atau merubah beberapa tampilan blog AMP, mungkin dengan membaca postingan saya di bawah ini bisa membantu teman-teman. Postingan ini saya tulis berdasarkan pengalaman saya ketika edit CSS pada template AMP ini, jadi Insya Allah mudah dipahami.Untuk panduanya bisa ikuti tautan berikut →Memahami Cara Edit CSS pada Template Kompi Flexible AMP
Yaitu gambar yang muncul di atas postingan bukan di dalam postingan. Yang perlu diperhatikan ketika menyisipkan gambar adalah pilih “original size” kemudian hapus “link” gambar dan jangan lupa memberi “alt” dan “title” gambar.
Gambar yang dimasukkan secara deafult ketika dilihat pada HTML terlihat seperti ini:
Ganti menjadi:
Yaitu gambar yang muncul di dalam postingan atau artikel. Yang perlu diperhatikan sama seperti ketika memasukkan gambar pada poin 1.2 di atas. Tetapi ganti menjadi seperti di bawah ini:
Dan tambahkan kode di dibawah ini pada postingan paling atas supaya ketika gambar di klik bisa full screen. Jika tidak ingin menambahkan kode di bawah ini maka kode tabindex=”0” pada <amp-image di atas harus dihapus.
Sehingga menjadi seperti ini:
Untuk pengaturan tata letak gambar di dalam postingan; bagaimana cara meletakkan gambar dengan posisi gambar berada disisi kiri, kanan, atau tengah supaya responsive dan valid AMP lebih lengkapnya bisa kunjungi blog Kompi Ajaib.
http://www.kompiajaib.com/2016/11/mengatur-gambar-postingan-blog-amp-html.html
4. Menyisipkan slider gambar
Dengan slider gambar kita bisa memasukkan beberapa gambar pada satu tempat saja sehingga tidak menghabiskan banyak ruang di dalam postingan. Slider gambar sangat cocok digunakan sebagai album gambar. Caranya adalah dengan menggunakan kode berikut:
Banyak sekali manfaat video di dalam postingan terlebih pada blog yang berkonten tutorial. Bahkan saya pernah membaca bahwa konten yang menarik adalah konten yang tidak cukup hanya degan tulisan artikel saja, tetapi harus memuat gambar, audio, dan video. Dengan konten yang menarik (lengkap) tentunya pasti memberi manfaat yang lebih bagi pembaca, disukai pengunjung, dan ketika mendaftar adsense memiliki kesempatan besar untuk diterima (katanya sih,, soalnya saya belum mencoba sebab blog ini masih terlalu dini dan miskin konten, hehe..).
Berikut kode untuk menyisipkan video di dalam posting supaya valid AMP
Karena saya masih belum punya video sama sekali maka saya izin menambahkan videonya bapak Adhy Suryadi di dalam postingan ini. Soalnya mau memakai videonya abang saya dianya pelit sekali.
Hasilnya seperti berikut:
Saya akan update videonya jika saya sudah memiliki video sendiri. :D
Meskipun terasa sulit tetapi saya tidak harus berganti template. Toh lama-lama pasti terbiasa dan akhirnya akan terasa mudah. Kenapa harus memakai template AMP jika penggunaannya merepotkan, kan masih ada template yang lebih mudah? Itu sih terserah penggunanya masing-masing. Ada yang suka template dengan desain tampilan yang megah, tetapi ada juga yang suka template dengan desain tampilan sederhana. Yang pasti diantara keduanya (sulit-mudah atau megah-sederhana) pasti memiliki kekurangan dan kelebihan masing-masing.
Setelah mengingat, menimbang, dan memperhatikan kekurangan-kelebihan tersebut akhirnya saya memutuskan untuk tetap menggunakan template AMP. Alasan saya ada pada postingan sebelumnya dan salah satunya adalah karena saya ingin mengikuti perkembangan teknologi. Saya yakin AMP pasti akan terus berkembang dan penggunanya pun akan semakin banyak, serta tidak menutup kemungkinan AMP akan lebih dipermudah oleh perancangnya.
Di mana saya bisa mendapatkan template blogger AMP yang keren?
Di themeforest.net banyak sekali tetapi saya rasa harganya cukup mahal :D
Di mana saya bisa mendapatkan template blogger AMP yang murah?
Insya Allah di kompiajaib. com lebih murah dan full service :)
Saya sudah mempunyai banyak postingan, tentunya lebih susah bagi saya mengedit semua postingan saya supaya valid AMP!
Ada cara lebih mudah yang dibagikan oleh kompiajaib.com (http://www.kompiajaib.com/2016/11/cara-mudah-mengedit-postingan-blog-amp.html)
Malahan beliau rela mengedit 800 postingan demi AMP :)
Saya rasa setiap blogger yang menggunakan template AMP pasti mengalami kesulitan dengan aturan yang ada. Berbeda dengan template selain AMP yang umumnya sudah digunakan blogger selama bertahun-tahun. Mungkin sebab sudah berkembang lama sehingga penggunaannya lebih mudah.
Halaman ini saya buat untuk mempermudah saya membuat postingan dan sebagai arsip saya mempelajari template AMP. Kustomisasi ini saya dapat dari Kompi Ajaib ketika saya membelinya.
Lalu Bagaimana Caranya Supaya Postingan Blog Valid AMP Dari Template Kompi Flexible AMP ??
Membuat postingan atau menulis artikel adalah kegiatan yang paling sering dilakukan oleh bogger dalam mengembangkan blognya, apa lagi kalau tidak membuat postingan. Tetapi untuk membuat posting supaya valid AMP saya rasa memang cukup merepotkan terlebih ketika menyisipkan gambar dan video. Oleh karena itu halaman ini saya buat dan semoga bisa membantu blogger lain yang masih pemula seperti saya. Awalnya mungkin memang sulit tetapi jika sudah terbiasa pasti jadi mudah.
1. Tidak boleh ada style di dalam postingan
Perlu diingat bahwa di dalam postingan tidak boleh ada tag HTML dengan CSS inline seperti <div style="text-align: justify;"></div> ataupun lainnya. Untuk mengatasinya kita bisa menambah kode CSS pada template sebagai berikut .center {text-align: justify;} kemudian mengganti <div style="text-align: justify;"></div> menjadi <div class="justify"></div>. Meskipun saya masih belum bisa tetapi saya rasa ini diperlukan sebagai catatan saya.
Update! Jika teman-teman masih bingung ketika ingin menambah atau merubah beberapa tampilan blog AMP, mungkin dengan membaca postingan saya di bawah ini bisa membantu teman-teman. Postingan ini saya tulis berdasarkan pengalaman saya ketika edit CSS pada template AMP ini, jadi Insya Allah mudah dipahami.Untuk panduanya bisa ikuti tautan berikut →Memahami Cara Edit CSS pada Template Kompi Flexible AMP
2. Menyisipkan gambar di luar postingan
Yaitu gambar yang muncul di atas postingan bukan di dalam postingan. Yang perlu diperhatikan ketika menyisipkan gambar adalah pilih “original size” kemudian hapus “link” gambar dan jangan lupa memberi “alt” dan “title” gambar.
Gambar yang dimasukkan secara deafult ketika dilihat pada HTML terlihat seperti ini:
<div class="separator" style="clear: both; text-align: center;">
<img alt="alt gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJSvf2jJ8k24spM4XKev8XUOOFBpusyfxgY-GqvORcJNoKFoZoRnoxU00ariUkp5S8t-MPBEc08SaNF1ViQ26UmtcHxKz_gOvLbWJddWqCCLhLojki7PVIai2bSRQUAdLfmmaRd3DcTqs/s1600/valid-amp.jpg" title="title gambar" /></div>
Ganti menjadi:
<noscript>
<img alt="alt gambar" width="650" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJSvf2jJ8k24spM4XKev8XUOOFBpusyfxgY-GqvORcJNoKFoZoRnoxU00ariUkp5S8t-MPBEc08SaNF1ViQ26UmtcHxKz_gOvLbWJddWqCCLhLojki7PVIai2bSRQUAdLfmmaRd3DcTqs/s1600/valid-amp.jpg" title="title gambar" />
</noscript>
3. Menyisipkan gambar di dalam postingan
Yaitu gambar yang muncul di dalam postingan atau artikel. Yang perlu diperhatikan sama seperti ketika memasukkan gambar pada poin 1.2 di atas. Tetapi ganti menjadi seperti di bawah ini:
<amp-img
alt="alt gambar "
title="title gambar "
width="650"
height="350"
layout="responsive"
on="tap:lightbox1"
role="button"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6jkc4HGTofpPmLARPFli7RSPXjZHa_1cPNJ-OZURbH141yG0CGMLeOa9KKiAAFIHix1rYnTsioUP7AMZfLY8LggRAiJgmswKu7bGnbq_1IduMwJWPsUpTTr9qCZJn23HDuZvmjfuawElc/s1600/Chris-Gardner2.jpg"
tabindex="0">
</amp-img>
Dan tambahkan kode di dibawah ini pada postingan paling atas supaya ketika gambar di klik bisa full screen. Jika tidak ingin menambahkan kode di bawah ini maka kode tabindex=”0” pada <amp-image di atas harus dihapus.
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
Sehingga menjadi seperti ini:
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>Catatan; ukuran gambar harus disesuaikan dengan lebar dan tinggi gambar asli
<noscript>
<img alt="alt gambar "
title=" title gambar "
width="650"
height="350"
src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8rw7C5Kq4qWfeqcHhlvyoCYHUlcEkNKreXJ_ocIPSMBKEuEfQKTXeu6TwkfndHYcLGYmAnEs855iE53zw7RXHRlcyEYzY8u76hYenZvfxYcbsnAsd2JNBurgFSqEGOBZkqUH0w0Iq8Im/s1600/manajemen.jpg "/>
</noscript>
TULISAN ARTIKEL
<amp-img
alt="alt gambar "
title="title gambar "
width="650"
height="350"
layout="responsive"
on="tap:lightbox1"
role="button"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6jkc4HGTofpPmLARPFli7RSPXjZHa_1cPNJ-OZURbH141yG0CGMLeOa9KKiAAFIHix1rYnTsioUP7AMZfLY8LggRAiJgmswKu7bGnbq_1IduMwJWPsUpTTr9qCZJn23HDuZvmjfuawElc/s1600/Chris-Gardner2.jpg"
tabindex="0">
</amp-img>
TULISAN ARTIKEL dst..
Untuk pengaturan tata letak gambar di dalam postingan; bagaimana cara meletakkan gambar dengan posisi gambar berada disisi kiri, kanan, atau tengah supaya responsive dan valid AMP lebih lengkapnya bisa kunjungi blog Kompi Ajaib.
http://www.kompiajaib.com/2016/11/mengatur-gambar-postingan-blog-amp-html.html
4. Menyisipkan slider gambar
Dengan slider gambar kita bisa memasukkan beberapa gambar pada satu tempat saja sehingga tidak menghabiskan banyak ruang di dalam postingan. Slider gambar sangat cocok digunakan sebagai album gambar. Caranya adalah dengan menggunakan kode berikut:
<amp-carousel width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgIR5irulYR1HPEt5o8QEkgQbeO8RTNh6wIPABc6DmWcc4jnU4QU95OAp1KYkwe-_J-XXgKWM45QFFkm-RGliu6zR410Hc5G2mWgr7OUB3TW0b7S-7CG11cMkZV9iqMbJ4CKgoFziHfHF/s1600/image1.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUHnonueoiCoPrfBSfiXwj67ykMqroarOzzVOQdqW7paLAJnzpWToxIxuP6Dws-9w4q_ZLlRKEHvbyIKmlryBwSD3YEs3F8c348yODp8UsGhuhKZ7wp_B5iiH3WS9NVnYsOEd3ZXcHQOGA/s1600/image2.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnHrOFtPaGm_eVq1xzCWoQUgRpJkUsXaewhJOgR9eNTWu698_suS94A6yjpfCGJte34X1h2wIcmM1YyhmNlSGsWJrK4ECN0j5zd0_930EZ5qj-LNyUthkk6KF05IfNHYhf3PltB4hSiW6a/s1600/image3.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
</amp-carousel>
4. Menyisipkan video di dalam postingan
Banyak sekali manfaat video di dalam postingan terlebih pada blog yang berkonten tutorial. Bahkan saya pernah membaca bahwa konten yang menarik adalah konten yang tidak cukup hanya degan tulisan artikel saja, tetapi harus memuat gambar, audio, dan video. Dengan konten yang menarik (lengkap) tentunya pasti memberi manfaat yang lebih bagi pembaca, disukai pengunjung, dan ketika mendaftar adsense memiliki kesempatan besar untuk diterima (katanya sih,, soalnya saya belum mencoba sebab blog ini masih terlalu dini dan miskin konten, hehe..).
Berikut kode untuk menyisipkan video di dalam posting supaya valid AMP
<amp-youtube
data-videoid="ID VIDEO YOUTUBE"
height="270"
layout="responsive"
width="480"></amp-youtube>
Karena saya masih belum punya video sama sekali maka saya izin menambahkan videonya bapak Adhy Suryadi di dalam postingan ini. Soalnya mau memakai videonya abang saya dianya pelit sekali.
Hasilnya seperti berikut:
Saya akan update videonya jika saya sudah memiliki video sendiri. :D
Meskipun terasa sulit tetapi saya tidak harus berganti template. Toh lama-lama pasti terbiasa dan akhirnya akan terasa mudah. Kenapa harus memakai template AMP jika penggunaannya merepotkan, kan masih ada template yang lebih mudah? Itu sih terserah penggunanya masing-masing. Ada yang suka template dengan desain tampilan yang megah, tetapi ada juga yang suka template dengan desain tampilan sederhana. Yang pasti diantara keduanya (sulit-mudah atau megah-sederhana) pasti memiliki kekurangan dan kelebihan masing-masing.
Setelah mengingat, menimbang, dan memperhatikan kekurangan-kelebihan tersebut akhirnya saya memutuskan untuk tetap menggunakan template AMP. Alasan saya ada pada postingan sebelumnya dan salah satunya adalah karena saya ingin mengikuti perkembangan teknologi. Saya yakin AMP pasti akan terus berkembang dan penggunanya pun akan semakin banyak, serta tidak menutup kemungkinan AMP akan lebih dipermudah oleh perancangnya.
Di mana saya bisa mendapatkan template blogger AMP yang keren?
Di themeforest.net banyak sekali tetapi saya rasa harganya cukup mahal :D
Di mana saya bisa mendapatkan template blogger AMP yang murah?
Insya Allah di kompiajaib. com lebih murah dan full service :)
Saya sudah mempunyai banyak postingan, tentunya lebih susah bagi saya mengedit semua postingan saya supaya valid AMP!
Ada cara lebih mudah yang dibagikan oleh kompiajaib.com (http://www.kompiajaib.com/2016/11/cara-mudah-mengedit-postingan-blog-amp.html)
Malahan beliau rela mengedit 800 postingan demi AMP :)