Heri Juniar. Sekarang ini di dunia blogger sedang boomingnya menggunakan Template blogger AMP, banyak blogger mengganti template blog dengan template valid amp, termasuk blog saya ini. Tujuannya supaya lebih ringan khususnya di smartphone, dimana untuk saat ini kebanyakan orang lebih memanfatkan smartphone untuk browsing daripada menggunakan laptop atau PC.
Data e-marketer menyebutkan bahwa jumlah pengguna smartphone di indonesia saat ini sekitar 500 juta lebih pengguna aktiv, dan terus bertambah tiap tahunnya. Melihat kenyataan tersebut, banyak website membuat laman khusus AMP.
Tetapi edit template AMP dan membuat artikel valid AMP bagi saya pribadi yang baru mengenal, gampang-gampang susah, terlalu banyak kode, aturan baru perihal penggunaan script, dll. Berbeda jauh dengan template NON AMP. Untuk itu, kali ini saya akan membagikan sedikit yang saya tahu, KODE/SCRIPT AMP untuk membuat artikel agar valid amp.
MENYISIPKAN GAMBAR
1. Gambar di atas postingan
Buat postingan Gambar di mode HTML, 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="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 dari postingan anda, dan sesuaikan dengan ukuran css image anda.
2. Gambar di tengah, kanan atau kiri Postingan
Untuk menyisipkan gambar,di tengah, kanan atau kiri postingan, silahkan gunakan kode amp image dibawah ini.
<amp-img src="/img/amp.jpg" width="300" height="169" layout="responsive" alt="an image"></amp-img>
Silahkan sesuai dengan gambar anda, anda bisa mengganti ukuran; img-width-300, img-center, terserah anda. 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;}
}
CATAT! Ukuran "width" dan "height" gambar harus sesuai dengan lebar dan tinggi gambar sesungguhnya baik blog AMP HTML maupun blog non AMP HTML.
MENYISIPKAN VIDEO
Jika 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>
MENAMBAHKAN BUTTON
Jika anda ingin menambahkan button; misalkan "demo" dan "download" silahkan tambahkan CSS berikut pada amp-costum blog anda.
.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="URL Anda" target="_blank">Demo</a></li>
<li><a class="download" href="URL Anda" target="_blank">Download</a></li>
</ul>
Ganti dengan URL anda. Sehingga tampak hasilnya seperti berikut :<li><a class="demo" href="URL Anda" target="_blank">Demo</a></li>
<li><a class="download" href="URL Anda" target="_blank">Download</a></li>
</ul>