Satu Kolom Free Responsive AMP HTML Blogger Template

- Januari 19, 2017


Masih heboh tentang template dasar AMP HTML yang tentunya meiliki engine yang sudah dikembangkan sedemikian rupa oleh Google. Sebelumnya saya juga sudah share template DroidBuzz yang menggunakan struktur template AMP juga.

Kali ini saya berkesempatan untuk share template buatan blogger faforit saya yaitu Kang Ismet, template yang dibangun dengan sangat sederhana dengan tampilan satu kolom ini saya rasa sangat patut untuk kamu koleksi. Karena juga sudah menggunakan kombinasi Material Icon Google.

Blogger Template Style
Name : AMP HTML Responsive Blogger Template
Version : 1.2
Publish Date : 23 Oktober 2016
Intructions : Cara Memasang Template Blogger
Designer : Kang Ismet Modified by Iwan Efendi
URL : http://iwanberbagi.com - http://blog.kangismet.net
Published : http://situstemplate.com

Fitur Template
- Responsive Design
- AMP Ready
- 2 Columns on Homepage
- 1 Column on Page and Static Page
- Customize AMP Sidebar
- Share Button
- On Click Disqus Comments
- Related Post (just https://)
- dll

Template ini pada homepage sebenarnya menggunakan tampilan dua kolom, tapi pada postingan mengunakan satu kolom. Namun tetap saja, template ini saya anggap cuma memiliki satu kolom karena tidak memiliki sidebar.

Untuk menghindari error yang sudah sering terjadi, kamu hanya perlu mengganti hosting html yang digunakan untuk iframe related post dan disqus comments. Sebelumnya template ini sudah saya perbaharui untuk hosting html yang error dan juga humberger menu yang menghilang secara misterius.

Namun sebelumnya saya akan share cara konfigurasi untuk disqus, perhatikan kode berikut :
<span class='disqus-box'><amp-iframe expr:src='&quot;https://cdn.rawgit.com/kangismet/ki-html/master/disqus5.html?shortname=amphtml&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups allow-forms' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>
  </amp-iframe></span>
Perhatikan kode yang saya berikan marking warna kuning itu, itu adalah id disqus yang harus kamu ganti dengan id disqus kamu sendiri, agar semua notifikasi akan masuk ke dasbord disqus kamu sendiri.

Selanjutnya perhatikan kode hosting disqus berikut :
https://cdn.rawgit.com/kangismet/ki-html/master/disqus5.html
Seperti yang sudah saya jelaskan tadi, jika hosting tersebut error atau bahkan disqunya tidak mau tampil berarti hostingnya bermasalah, kamu harus menghosting sendiri atau nanti bisa saya buatka hostingnya. Setidaknya saya sudah membackupnya disini.

Untuk related post AMP HTML ini hanya support untuk blogspot dan yang menggunakan https:// saja, jadi untuk kamu yang tidak tampil karena menggunakan custom domain. Namun disini saya hanya akan membahas tentang hosting htmlnya yang saya kawatirkan error, perhatikan kode berikut :
https://kangismet.github.io/blogger-related-posts/related3.html
Hosting tersebut sudah saya buatkan mirrornya disini. Untuk konfigurasi lebih lanjut kamu bisa mlihat artikel yang sudah pernah saya publikasikan sebelumnya, lihat disini.

Advertisement

Berkomentarlah jika memang ada pertanyaan apapun itu, admin akan membalasnya jika tidak ada kesibukan lainnya. Terima kasih
EmoticonEmoticon

 

Start typing and press Enter to search