Template Setting Simple AMP Templates

Untuk pengaturan dalam AMP template baik saat membuat posting dan pengaturan widget membutuhkan ketelatenan dalam penerapannya. Hal ini memang karena untuk Blogger sendiri belum menyediakan template yang support AMP. Untuk menyiasati hal tersebut maka kita dapat melakukan trik-trik yang dapat mempermudah dalam pengaturan AMP template.

A. Widget
Setelan widget AMP templates jelas berbeda dengan setingan pada tenplate pada umumnya. Salah satu perbedaannya adalah pada AMP templates kita tidak bisa menambahkan widget begitu saja, namun harus diatur terlebih dahulu dalam template agar tidak terjadi pesan error. Berikut ini beberapa cara setting template pada AMP tempales.

1. Widget Popular Post.
Pengaturan dalam template antara lain sebagai berikut
/*Popular Posts*/
.PopularPosts .widget-content{padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none}
.PopularPosts .widget-content ul li{background:#fff; border : 1px solid #ddd; margin:0 0 10px;padding:10px;position:relative;}
.PopularPosts .widget-content ul li .item-title{line-height:1.1em;padding:6px 10px 0 0}
.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:16px;font-weight:500}
.PopularPosts .widget-content ul li a:hover,.PopularPosts .widget-content ul li:hover a{color:#e8554e}
.PopularPosts .item-snippet{text-align:justify;font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em;}
.PopularPosts .widget-content ul li img{width:100%;height:110px;padding-right:0;transition:all .5s ease-out}
.PopularPosts .item-thumbnail{float:left;margin:0 10px 0 0;width:100px;height:70px;overflow:hidden}
.PopularPosts .item-thumbnail:hover img{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3)}
Setelah kode di atas ada dalam template silahkan atur tinggi gambar, snipet, dan pengaturan lainnya.


2. Widget Google Plus
Pengaturan Widget Google Plus antara lain sebagai berikut
Silahkan tambahkan widget pada blog anda seperti cara biasanya yaitu dengan menggungakn widget HTML/JavaScript. Setelah ditambahkan, Anda harus masuk menu edit html dan buang kode : <b:include name='quickedit'/> pada widget yang baru ditambahkan agar tidak muncul pesan error pada AMP validator. Setelah template selesai disimpan, silahkan masuk kembali ke setting widget silahkan masukkan kode berikut.
<amp-iframe width="280"
      height="240"
      sandbox="allow-scripts allow-same-origin allow-popups"
      frameborder="0"
      scrolling="no"
      src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/gplus-followerbox.html?user=+RadenGino&theme=light">
  </amp-iframe>
Silahkan ganti +RadenGino dengan username anda. dan tentukan juga pilihan light atau dark pada bagian akhir kode.


B. Memasang Gambar Thumbnail dan Gambar Posting
Untuk menambahkan gambar dalam postingan pada AMP template dapat dilakukan secara manual dengan menambahkan kode. seperti di bawah ini.
<div class="thumb-post">
<noscript><img src="#" width="600" height="350" alt="Aku Anak Indonesia"/></noscript> </div>
<amp-img alt="Suku Minang" height="400" layout='responsive' src="#" width="600"></amp-img>
Kedua kode tersebut merupakan kode untuk thumbnail dan gambar dalam postingan. Gambar thumbnail diletakkan pada bagian paling atas postingan (mode html), sedangkan untuk gambar bisa ditempatkan di mana saja sesuai dengan kebutuhan. Misalnya seperti ini
<div class="thumb-post">
<noscript><img src="#" width="600" height="350" alt="Aku Anak Indonesia"/></noscript> </div>
Isi artikel
<amp-img alt="Suku Minang" height="400" layout='responsive' src="#" width="600"></amp-img>
Isi artikel
src="#" (silahkan ganti # dengan url gambar) width="600" dan height="350" (ganti sesuai kebutuhan)

Untuk memudahkan agar tidak selalu menulis kedua kode tersebut silahkan masukan kedua kode dalam post template dengan cara sebagai berikut.

Dengan kedua kode yang sudah tersimpan dalam pengaturan, sehingga jika anda akan membuat posting baru kedua kode tersebut sudah ada dalam postingan. Untuk langkah selanjutnya jika anda membuat posting silahkan unggah gambar seperti biasa kemudian atur ukuran tinggi dan lebar sesuai yang anda ainginkan. Catatan kode layout="responsive" memungkinkan gambar akan menyesuaikan dengan ukuran perangkat yang digunakan. Saran saya sebaiknya gambar dalam postingan menggunakan gambar penuh saja.

C. Komentar Disqus
Pengaturan komentar disqus dapat dilakukan dengan cara mengubah username yang ada pada template dengan username Anda,


D. Social Icon
Pada bagian atas ada profil sosial media, untuk pengaturannya silahkan lihat gambar di bawah ini.


E. Pesan Kesalahan
Biasanya jika ada kesalahan dalam pengaturan template AMP validator akan memberikan peringatan, misalnya pada gambar di bawah ini.

Untuk mengatasi pesan kesalahan seperti pada gambar, dapat dilakuan dengan menerapkan tag kondisional, misalnya :
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
AMP js yang dibutuhkan
AMP js yang dibutuhkan
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
Amp js yang dibutuhkan
Amp js yang dibutuhkan
</b:if>

Validator AMP Silahkan cek : di sini