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*/Setelah kode di atas ada dalam template silahkan atur tinggi gambar, snipet, dan pengaturan lainnya.
.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)}
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"Silahkan ganti +RadenGino dengan username anda. dan tentukan juga pilihan light atau dark pada bagian akhir kode.
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>
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">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
<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>
<div class="thumb-post">src="#" (silahkan ganti # dengan url gambar) width="600" dan height="350" (ganti sesuai kebutuhan)
<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
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 != "static_page"'>
AMP js yang dibutuhkan
AMP js yang dibutuhkan
</b:if>
<b:if cond='data:blog.pageType != "item"'>
Amp js yang dibutuhkan
Amp js yang dibutuhkan
</b:if>
Validator AMP Silahkan cek : di sini
Add your comment