Kode AMP Untuk Membuat Postingan Di Template AMP

Template blogger AMP saat ini sedang booming di dunia blogger, banyak blogger yang berganti template blog dengan template blog amp, contohnya seperti blog saya ini, tujuannya supaya lebih ringan di smartphone, karena saat ini jutaan penggunaan smartphone lebih memilih browsing dengan smartphone daripada dengan laptop atau PC,data e-marketer menyebutkan jumlah pengguna smartphone di indonesia tahun 2017 sebanyak 547 juta pengguna aktiv,melihat fakta tersebut website-website seperti kompas,detik.com,bobotoh.id dan lainnya membuat laman khusus AMP atau smartphone,namun edit html amp dan membuat postingan template amp, gampang-gampang susah, karena banyak kode / script dari template blog non amp tidak bisa di gunakan di template AMP, contohnya seperti inline style dan lainnya. Untuk itu saya akan membagikan kode/script amp untuk membuat postingan supaya valid amp?

Pertama
Buat postingan di mode html, karena nantinya tidak usah menghapus kode-kode seperti diatas,biar 1 kali ketik langsung jadi hehe, gunakan kode script amp dibawah ini untuk gambar judul postingan amp


<noscript>
<img alt="Judul postingan" height="414" width="750" src="img/amp.jgp" title="<strike>Judul postingan" /></noscript>

Ganti judul postingan dengan judul posting anda, ganti img/amp.jgp dengan url gambar anda, simpan kode tersebut di posisi paling atas, sesuaikan dengan ukuran css image anda.

Kedua
Untuk menyisipkan gambar,di tengah,kanan atau kiri silahkan gunakan kode amp image dibawah ini.


<div class="img-width-300 img-center">
<amp-img src="/img/amp.jpg"
      width="300"
      height="169"
      layout="responsive"
      alt="an image"></amp-img>
</div>

Silahkan sesuai dengan gambar anda, anda bisa mengganti ukuran img-width-300 img-center, menjadi 400,500,600 terserah anda, silahkan sesuaikan, namun jika tidak sesuai, silahkan tambah CSS berikut di css tampilan desktop dan css tampilan mobile.


.img-center{text-align:center;margin:0 auto;}
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-width:600px;}
@media screen and (max-width:640px){
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}

Ingat! width dan height gambar harus sesuai dengan lebar dan tinggi gambar sesungguhnya baik blog AMP HTML maupun blog non AMP HTML.

Ketiga
Jika anda ingin menambahkan video dari youtube, anda harus menggunakan youtube iframe, kodenya seperti berikut.


<amp-youtube
    data-videoid="mGENRKrdoGY"
    layout="responsive"
    width="480" height="270"></amp-youtube>

Ganti kode youtube mGENRKrdoGY dengan kode embed youtube anda, namun sebelumnya pastikan template amp anda memiliki kode javascript dibawah ini.


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

Keempat
Jika anda ingin menambahkan link google formulir,link github/ragwit,google maps dan lain-lain silahkan gunakan kode berikut


<amp-iframe width="200" height="100"
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="link google docs/ragwit/maps">
</amp-iframe>

Sebelumnya pastikan kode amp dibawah ini sudah tersedia pada template anda


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

Kelima
Jika anda ingin menambahkan button demo dan download silahkan tambahkan CSS dibawah ini pada amp-costum ada


.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

Lalu pada saat membuat postingan, tambahkan kode dibawah ini pada mode html


<ul class="button">
<li><a class="demo" href="http://www.demangfedi.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.demangfedi.com" target="_blank">Download</a></li>
</ul>
<div class="clear">
</div>

Ganti dengan URL andaSelamat mencoba, jangan lupa untuk menginstal Extension VALID AMP pada browser anda, jika menggunakan chrome silahkan DISINI