Free Tamplate AMP HTML Dari Kang Ismet

Template ini didesign sangat minimalist dari Kang Ismet, dengan tampilan Grid yang sangat baik sih menurut saya, sangat cocok untuk sobat yang membuat artikel personal. Dan pada template ini memiliki fitur hide sidebar yang sangat keren.

Fitur Template AMP HTML buatan Kang Ismet :
1. AMP Ready
2. Related Post (Khusus https:// user)
3. 2 Columns di Homepage dan Static Page
4. 1 Column di Postingan
5. Circle Share Button
6. Custom Sidebar Menu
7. Hide Mode Disqus Ready
8. Dan Beberapa Fitur Keren Lainnya


Harapan saya sih Kang Ismet bisa membuatkan template premium yang menjadi salah satu template pilihan untuk sobat yang hoby ngeblog

Template ini perlu konfigurasi yang berbeda dari template biasanya, maka dari itu sobat harus perhatikan dokumentasi yang saya buat agar memudahkan kamu dalam menggunakan template ini

Demo

Konfigurasi Pada Template

Untuk konfigurasi pada template ini sobat harus masuk pada template sobat, dan mulai setting bagian-bagian penting seperti dibawah ini

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_mCToIbCEOUE72e0_H1V-9NWhc8cFrSdUPZF9nrTE7u-VWCTOMRV37fMYb5LP9iGKwsig2VeZc2xVDPjcc_OvYCz1EAnuQFB948ro-jerjpgxnvhs9umeDOm-Vhyphenhyphen5h2uZRnIQo5exqpp/s192/amp-icon-new.png' rel='apple-touch-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_mCToIbCEOUE72e0_H1V-9NWhc8cFrSdUPZF9nrTE7u-VWCTOMRV37fMYb5LP9iGKwsig2VeZc2xVDPjcc_OvYCz1EAnuQFB948ro-jerjpgxnvhs9umeDOm-Vhyphenhyphen5h2uZRnIQo5exqpp/s76/amp-icon-new.png' rel='apple-touch-icon' sizes='76x76'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_mCToIbCEOUE72e0_H1V-9NWhc8cFrSdUPZF9nrTE7u-VWCTOMRV37fMYb5LP9iGKwsig2VeZc2xVDPjcc_OvYCz1EAnuQFB948ro-jerjpgxnvhs9umeDOm-Vhyphenhyphen5h2uZRnIQo5exqpp/s120/amp-icon-new.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_mCToIbCEOUE72e0_H1V-9NWhc8cFrSdUPZF9nrTE7u-VWCTOMRV37fMYb5LP9iGKwsig2VeZc2xVDPjcc_OvYCz1EAnuQFB948ro-jerjpgxnvhs9umeDOm-Vhyphenhyphen5h2uZRnIQo5exqpp/s152/amp-icon-new.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_mCToIbCEOUE72e0_H1V-9NWhc8cFrSdUPZF9nrTE7u-VWCTOMRV37fMYb5LP9iGKwsig2VeZc2xVDPjcc_OvYCz1EAnuQFB948ro-jerjpgxnvhs9umeDOm-Vhyphenhyphen5h2uZRnIQo5exqpp/s180/amp-icon-new.png' rel='apple-touch-icon' sizes='180x180'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_mCToIbCEOUE72e0_H1V-9NWhc8cFrSdUPZF9nrTE7u-VWCTOMRV37fMYb5LP9iGKwsig2VeZc2xVDPjcc_OvYCz1EAnuQFB948ro-jerjpgxnvhs9umeDOm-Vhyphenhyphen5h2uZRnIQo5exqpp/s128/amp-icon-new.png' rel='icon' sizes='128x128'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_mCToIbCEOUE72e0_H1V-9NWhc8cFrSdUPZF9nrTE7u-VWCTOMRV37fMYb5LP9iGKwsig2VeZc2xVDPjcc_OvYCz1EAnuQFB948ro-jerjpgxnvhs9umeDOm-Vhyphenhyphen5h2uZRnIQo5exqpp/s192/amp-icon-new.png' rel='icon' sizes='192x192'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_mCToIbCEOUE72e0_H1V-9NWhc8cFrSdUPZF9nrTE7u-VWCTOMRV37fMYb5LP9iGKwsig2VeZc2xVDPjcc_OvYCz1EAnuQFB948ro-jerjpgxnvhs9umeDOm-Vhyphenhyphen5h2uZRnIQo5exqpp/s180/amp-icon-new.png' name='msapplication-TileImage'/>

Pada kode tersebut sobat hanya perlu mengganti dengan icon blog yang sobat punya, dan sesuaikan ukuran yang saya berikan tanda khusus tersebut.
Karena itu akan mengubah ukuran image sesuai yang telah diatur pada template ini.

Selanjutnya sobat setting Thumbnail blog, Facebook Opengraph, dan juga Twitter dengan yang sobat gunakan, untuk cara mendapatkan kode-kodenya saya rasa sobat sudah tau caranya.

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8XcCMW3ekBE86o43O2mZSPDcyrOXGMH-pL_cG8XKRgIoGfhFgUP_e30z5I6x6QBkUOgkCt0_90sH3e__IL5sofUdBts_Sc8aEgL4TLhjIxZFo038V63Y7Hki7jK6Jr2dKYDddEhFLBG49/s1600/amphtml-thumbnail2.jpg' property='og:image'/>
</b:if>
</b:if>
<meta content='RPeddKqdLfKEV0gUDmitmq5hRs6L762HBSCsJOpS6Xo' name='google-site-verification'/>
<meta content='100002355346619' property='fb:admins'/>
<meta content='100002355346619' property='fb:profile_id'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='https://www.facebook.com/kangismet2' property='article:author'/>
</b:if>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@DroidPluss' name='twitter:creator'/>

Baca juga : Free Tamplate AMP Kompi Design Blogger

Berikutnya kamu perlu mengganti ID Google Analytycs dengan ID untuk blog sobat

<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
  &quot;vars&quot;: {
    &quot;account&quot;: &quot;UA-xxxxx-1&quot;
  },
  &quot;triggers&quot;: {
    &quot;trackPageview&quot;: {
      &quot;on&quot;: &quot;visible&quot;,
      &quot;request&quot;: &quot;pageview&quot;
    }
  }
}
</script>
</amp-analytics> 

Selanjutnya kamu bisa mengubah isi dari sidebar sebelah kiri yang berawal dari kode <amp-sidebar id='sidebar' layout='nodisplay' side='left'> sampai dengan kode </amp-sidebar> atau lengkapnya menjadi kode seperti gambar berikut :


Selanjutnya sobat perlu setting untuk kotak pencarian, kamu hanya perlu mengganti url blognya dengan url yang sobat gunakan, tepatnya seperti kode berikut :

<div class='search-wrapper'>
<div id='search-box'>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<meta content='https://amphtmlproject.blogspot.co.id/' itemprop='url'/>
  <form action='https://amphtmlproject.blogspot.co.id/search' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://amphtmlproject.blogspot.co.id/search?q={q}' itemprop='target'/>
<input class='search-form' id='feed-q-input' itemprop='query-input' name='q' placeholder='Search' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i class='material-icons'>&#59574;</i></button>
  </form></div>
</div>
</div>

Setelah sobat mengatur itu, selanjutnya sobat memerlukan setting account ID Disqus, karena samapi artikel ini dipublish komentar blogger belum support untuk AMP HTML. Sobat hanya perlu mengganti ID Disqus, menjadi ID Disqus yang sobat gunakan.

<b:includable id='disqus-comments' var='post'>
<div class='disqus-comments' id='disqus_comments'>
<amp-accordion>
    <section>
<h4>
<span class='show-more disqus-hide'>Tambahkan Komentar</span>
</h4>
<span class='disqus-box'><amp-iframe expr:src='&quot;https://cdn.rawgit.com/kangismet/ki-html/master/disqus4.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>
</section>
  </amp-accordion>
                </div>
</b:includable>

Sobat hanya perlu mengganti yang saya sudah tandai warna biru tersebut.

Terima kasih Kang Ismet dan Kang Adhy yang selalu share ilmu dan pengetahuannya dan pengalamannya.