Membuat Postingan Supaya Valid AMP


BLOG MOBILE.





     Untuk membuat postingan supaya valid AMP di blog AMP HTML tentunya harus memenuhi aturan dari AMP tersebut.
Seperti berberapa aturan kode kode di dalam Amp tidak boleh ada tag HTML dengan CSS inline seperti :
<div=style"text-align:justify;"</div>
Ataupun kode CSS lainnya seperti :
Center {"text-align: justify;"} dan kode lain lain seperti script onclick dan lainya juga hehe.

Berikut ini langkah langkah membuat postingan supaya valid AMP.
Mungkin bisa bermanfaat bagi anda dan tentunya juga bagi saya.

Sebenarnya orang orang sudah banyak yang posting tentang hal ini tetepi saya tulis ulang ya tambah tambah catatan saya.


MENYISIPKAN GAMBAR PADA POSTINGAN.



Seperti yang kita ketahui untuk posting gambar sedikit berbeda berikut ini contoh menyisipkan gambar pada judul postingan atau yang akan di jadikan thumbnail {bukan di dalam postingan}.

<noscript>
<img alt="alt gambar" width="650" height="350" src="https://3.bp.blogspot.com/-v1-eNxBF5W4/WDwrdRGK3JI/AAAAAAAAARA/sAIx0LyRTU4kZ5OJjP0NdYamnCia5jl0ACLcB/s1600/valid-amp.jpg" title="title gambar" />
</noscript>

MENYISIPKAN GAMBAR DI DALAM POSTINGAN.



Sedikit contoh ketika upload gambar di template HTML bisa ketika postingan di ubah menjadi mode HTML contoh default nya seperti ini.

<div class="separator" style="clear: both; text-align: center;">
<img alt="alt gambar" border="0" src="https://3.bp.blogspot.com/-v1-eNxBF5W4/WDwrdRGK3JI/AAAAAAAAARA/sAIx0LyRTU4kZ5OJjP0NdYamnCia5jl0ACLcB/s1600/valid-amp.jpg" title="title gambar" /></div>

Tetapi ini tidak akan valid karna seperti yang sudah saya singgung di atas di dalam Amp tidak boleh ada tag <div=style"text-align:justify;"</div>
Ataupun kode CSS lainnya seperti :
"Center"{"text-align: justify;"}

Berikut ini script untuk contoh gambar dalam postingan
<amp-img 
alt="alt gambar "
title="title gambar "
width="650"
height="350" 
layout="responsive" 
on="tap:lightbox1" 
role="button" 
src="https://1.bp.blogspot.com/-ZIzehUc97rU/WDsmBxUL3LI/AAAAAAAAAQw/A91svWl-jk8wvulw3SXlPYAwz_5nnyZbACLcB/s1600/Chris-Gardner2.jpg" 
tabindex="0">
</amp-img>

Dan untuk membuat gambar dengan efek image lightbox cukup memasukan code ini di atas postingan awal.

<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

Efek lightbox ini berfungsi ketika gambar di klik akan full screen
Pastikan juga anda memasukan scrpit amp-image-lightbox di atas tag </head>

<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

Jika ingin menggukan slide gambar pada postingan berikut ini contohnya.

<amp-carousel width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="https://4.bp.blogspot.com/-v-y2hJEU49E/V-zSdVlbYRI/AAAAAAAAoAw/Gy0SGRDo6jAYOzFrWa7tb_L_uCGRftZWwCLcB/s1600/image1.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="https://2.bp.blogspot.com/-Am-eNX5IZWw/V-zSdUZ9NrI/AAAAAAAAoA0/4u1Q4tMiPpcuFHeSDbLbHJA8wEa8zOrngCLcB/s1600/image2.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="https://4.bp.blogspot.com/-rxREfSseAik/V-zSdgi92wI/AAAAAAAAoA4/80A0ZH_nEXAMe5jgjFtqDmZ5LFISzW4fQCLcB/s1600/image3.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
</amp-carousel>

Jadi skema contoh lengkapnya sepeti ini.
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

<noscript> <img alt="alt gambar " title=" title gambar " width="650" height="350" src=" https://3.bp.blogspot.com/-gkDEVDo109o/WC5_oy0xnPI/AAAAAAAAAOA/UzUpQ9FR9EAmaP1P73ptXj5FdE6MplwDACPcB/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://1.bp.blogspot.com/-ZIzehUc97rU/WDsmBxUL3LI/AAAAAAAAAQw/A91svWl-jk8wvulw3SXlPYAwz_5nnyZbACLcB/s1600/Chris-Gardner2.jpg" tabindex="0"> </amp-img>
TULISAN ARTIKEL dst.. Image slider. <amp-carousel width="400" height="300" layout="responsive" type="slides"> <amp-img src="https://4.bp.blogspot.com/-v-y2hJEU49E/V-zSdVlbYRI/AAAAAAAAoAw/Gy0SGRDo6jAYOzFrWa7tb_L_uCGRftZWwCLcB/s1600/image1.jpg" width="400" height="300" layout="responsive"></amp-img> <amp-img src="https://2.bp.blogspot.com/-Am-eNX5IZWw/V-zSdUZ9NrI/AAAAAAAAoA0/4u1Q4tMiPpcuFHeSDbLbHJA8wEa8zOrngCLcB/s1600/image2.jpg" width="400" height="300" layout="responsive"></amp-img> <amp-img src="https://4.bp.blogspot.com/-rxREfSseAik/V-zSdgi92wI/AAAAAAAAoA4/80A0ZH_nEXAMe5jgjFtqDmZ5LFISzW4fQCLcB/s1600/image3.jpg" width="400" height="300" layout="responsive"></amp-img> </amp-carousel>

Catatan pastikan juga ketika upolod gambar harus sesuai gambar original
Klik saja pada gambar original size dan hapus link gambarnya.


Saya juga sudah updet beberapa artikel tentang AMP

MUNGKIN BERMANFAAT.




Untuk lebih jelasnya cara posting supaya valid AMP anda bisa liat video berikut ini dari kang adhy suryadi beliau adalah salah satu blogger yang ahli dalam bidang validation AMP.



Selamat mencoba.
Terimakasih sudah berkunjung ke blog saya dan sekarng ada sedang membaca artikel MEMBUAT POSTINGAN SUPAYA VALID AMP.

Dan URL permalink nya.
http://bloggingmobile.blogspot.co.id/2017/05/membuat-postingan-supaya-valid-amp.html

add a comment with your facebook Hide comment

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×