Latest News

Satu Kolom Free Responsive AMP HTML Blogger Template

Satu Kolom Free Responsive AMP HTML Blogger Template


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.

Reaksi:

Berlangganan Via Email

Suka artikel di blog ini, atau ingin dapat template Gratis? nggak ada salahnya untuk berlangganan artikel terbaru dari blog ini langsung via email kamu.

Disqus Comments
How to style text in Disqus comments:Show
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Tool Hide Parse Tool

How to get ID DISQUS - http://disq.us/p/[ID DISQUS]

strong em u strike
pre code pre code spoiler
embed