IwanBerbagi.com - Setelah beberapa waktu yang lalu Kang Adhy yang membagikan template AMP Gratis yang pertama, kali ini Kang Ismet pun tidak mau ketinggalan untuk mencoba membuat template yang Valid AMP HTML.

Kekurangan dari menggunakan template Valid AMP HTML ialah, kita akan konfigurasi semuanya dari template ketika ingin customize dan dari mode HTML ketika akan membuat postingan. Semoga kedepannya Blogger akan lebih support untuk blog yang ingin valid AMP HTML ini.
Free AMP HTML Blogger Template dari Kang Ismet
Template ini didesign sangat minimalist dari Kang Ismet, dengan tampilan Grid yang sangat baik sih menurut saya, sangat cocok untuk kamu yang membuat artikel personal. Dan pada template ini memiliki fitur hide sidebar yang sangat keren.

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

Harapan saya sih Kang Ismet bisa membuatkan template premium yang menjadi salah satu template pilihan untuk kamu yang hoby ngeblog seperti saya.
Template ini perlu konfigurasi yang berbeda dari template biasanya, maka dari itu kamu harus perhatikan dokumentasi yang saya buat agar memudahkan kamu dalam menggunakan template ini.

Konfigurasi Pada Template
Untuk konfigurasi pada template ini kamu harus masuk pada template kamu, dan mulai setting bagian-bagian penting seperti dibawah ini :
<link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s192/amp-icon-new.png' rel='apple-touch-icon'/>
<link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s76/amp-icon-new.png' rel='apple-touch-icon' sizes='76x76'/>
<link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s120/amp-icon-new.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s152/amp-icon-new.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s180/amp-icon-new.png' rel='apple-touch-icon' sizes='180x180'/>
<link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s128/amp-icon-new.png' rel='icon' sizes='128x128'/>
<link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s192/amp-icon-new.png' rel='icon' sizes='192x192'/>
<meta content='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s180/amp-icon-new.png' name='msapplication-TileImage'/>
Pada kode tersebut kamu hanya perlu mengganti dengan icon blog yang kamu punya, dan sesuaikan ukuran yang saya berikan tanda khusus tersebut. Karena itu akan mengubah ukuran image sesuai yang telah diatur pada template ini.

Selanjutnya kamu setting Thumbnail blog, Facebook Opengraph, dan juga Twitter dengan yang kamu gunakan, untuk cara mendapatkan kode-kodenya saya rasa kamu sudah tau caranya.
<meta content='https://4.bp.blogspot.com/-iWBMw0dwhQk/WAQpURA0MnI/AAAAAAAAHvc/VQ4aISNqoSgHC7BWAJyjpn0oFjFOsApCACK4B/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'/>
Berikutnya kamu perlu mengganti ID Google Analytycs dengan ID untuk blog kamu
 <amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
  &quot;vars&quot;: {
    &quot;account&quot;: &quot;UA-85986961-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 :
Free AMP HTML Blogger Template dari Kang Ismet
Selanjutnya kamu perlu setting untuk kotak pencarian, kamu hanya perlu mengganti url blognya dengan url yang kamu 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 kamu mengatur itu, selanjutnya kamu memerlukan setting account ID Disqus, karena samapi artikel ini dipublish komentar blogger belum support untuk AMP HTML. Kamu hanya perlu mengganti ID Disqus, menjadi ID Dsiqus yang kamu 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>
Kamu hanya perlu mengganti yang saya sudah tandai warna kuning tersebut.
Untuk penggunaan tentang pemasangan kode image, youtube, dan lain-lain akan saya posting di artikel berikutnya, termasuk juga cara memasang iklan adsense pada template amp ini. Saya sudah buatkan Label baru yaitu AMP HTML. Mari sama-sama kita pelajari.
Terima kasih untuk Allah Swt yang terus memberi kesehatan, dan terima kasih Kang Ismet dan Kang Adhy yang selalu share ilmu dan pengetahuannya dan pengalamannya. Sekali lagi terima kasih Kang Adhy dan Kang Ismet.
Share this with short URL:
How to style text in Disqus comments:
  • 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 Parser Box

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

strong em u strike
pre code pre code spoiler
embed