IwanBerbagi.com - Dunia blogger mengalami perkembangan yang begitu pesat, padahal saya belum mahir dalam HTML yang biasa dan sekarang sudah hadir pula project baru google yang mengusung HTML yang sangat ngebut diseluruh perangkat, project ini disebut AMP Google.

Template Kompi Design Google AMP Responsive
Tampilan Template Droid Plus Template AMP (DEMO)
Fitur ini terdiri dari AMP JS, AMP HTML, dan GOOGLE AMP CACHE yang akan memaksimalkan pemuatan halaman website kita. Dan bagi website yang menggunakan AMP ini tentunya akan memiliki perbedaan ketika diakses. Akan ada lambang petir yang saya bisa katakan keren, jadi pengguna akan menentukan pilihannya ketika ingin membuka suatu web.
Pada gambar dan penjelasan diatas saya rasa kamu sudah bisa mengerti perbedaan mendasar yang ada pada project baru google ini, namun untuk kamu yang gak suka ribet pasti tidak akan suka menggunakan template ini, dikarenakan template AMP ini mengharuskan kamu untuk mengedit satu persatu postingan kamu agar bisa terbaca dengan baik pada mode AMP.
Terima kasih untuk kang Adhy dan kang Ismet selaku orang yang kreatif dalam membuat template ini, dan terima kasih kedua kalinya untuk Kang Adhy yang telah membagikannya secara gratis (ditunggu yang versi premiumnya kang). Semoga bermanfaat buat kita semua dan bisa kita pelajari.

Berikut ini beberpa pengaturan yang harus kamu lakukan jika ingin menggunakan template AMP ini :

Mengganti Logo Blog
Untuk mengganti logo, kamu hanya perlu mengganti URL Image pada kode dibawah ini dengan ukuran 30px x 30px.
          <b:includable id='title'>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><amp-img alt='Logo' expr:title='data:title' height='30' src='https://4.bp.blogspot.com/-2p-LDa2l2vQ/V-x2SveBi9I/AAAAAAAAn9o/oiupdYw6CgQxat9RtH8qjoZ9mfJYCRiSgCLcB/s1600/logo-kd2.png' width='30'/> <data:title/></span></a>
</b:includable>

Mengganti Komentar Disqus
Karena komentar blogger sendiri belum support dengan AMP, maka dari itu kita harus menggunakan komentas Disqus yang sudah support. Kamu hanya perlu megganti kode username disqus dengan punya kamu sendiri.
              <b:includable id='disqus-comments' var='post'>
<div class='disqus-comments' id='disqus_comments'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=kompi-design&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>
</amp-iframe>
                </div>
</b:includable>
Perhatikan yang sudah saya berikan block warna merah tersebut.

Template Iklan
Ada tempat iklan yang memungkinkan kamu untuk meletakkan iklan yang baik. Cari kode-kode dibawah ini dan sesuaikan.

Iklan Header
<div class='headerad'>
<amp-img alt='Header Ads' height='90' src='https://4.bp.blogspot.com/-U8BOd1cfeXw/V-z24UcmKEI/AAAAAAAAoBM/cb7H0j_k8DAkxwg2cB9Y3F1ynZwu0emKQCLcB/s1600/ads.jpg' title='Header Ads' width='728'/>
<div class='clear'/>
  </div>

Iklan Diatas Postingan
<div class='postabovead'>
<amp-img alt='Sidebar Ads' height='250' layout='responsive' src='https://3.bp.blogspot.com/-esrBMMHMH0I/V-0ArklIkUI/AAAAAAAAoBc/gsPpEXuRpXkYjXys1uSosh609qlzp1b6gCLcB/s1600/ads2.jpg' title='Sidebar Ads' width='300'/>
</div>

Iklan Dibawah Postingan
<div class='underpostad'>
<amp-img alt='Under Post Ads' height='90' src='https://4.bp.blogspot.com/-U8BOd1cfeXw/V-z24UcmKEI/AAAAAAAAoBM/cb7H0j_k8DAkxwg2cB9Y3F1ynZwu0emKQCLcB/s1600/ads.jpg' title='Under Post Ads' width='728'/>
<div class='clear'/>
  </div>
Untuk memasang banner, kamu hanya perlu mengganti URL Image-nya. Jika ingin menggunakan adsense silahkan kamu ganti amp-img dengan amp-ad seperti berikut ini :
<amp-ad width=300 height=250
      type="adsense"
      data-ad-client="ca-pub-2005682797531342"
      data-ad-slot="7046626912">
 </amp-ad>
Kamu hanya perlu sesuaikan parameter berikut ini :
  • data-ad-client
  • data-ad-slot
  • data-ad-host
  • data-adtest
  • data-tag-origin

Membuat Postingan
Untuk postingan ada beberapa hal yang harus kamu perhatikan dan lakukan adalah gunakan HTML pada postingan kamu, simpan HTML dibawah ini da simpan paling atas pada artikel kamu.
<div class="thumb-post">
<noscript><img src="https://2.bp.blogspot.com/-Xk6KKtIi7JA/U8MdruSxxMI/AAAAAAAAdQM/aKG8J3BXnUs/s1600/4.jpg" width="650" height="350" alt="Curabitur placerat est sem"/></noscript>
</div>
Setelah kode tersebut guna memanggil gambar pertama yang ada pada postingan, namun jika kamu menginginkan gambar lainnya kamu bisa menggunakan kode berikut ini yang sudah dilengkapi dengan automatis lightbox amp ketika gambar diklik.
<amp-img
      alt="Curabitur placerat est sem"
      height="350"
      layout="responsive"
      on="tap:lightbox1"
      role="button"
      src="https://2.bp.blogspot.com/-Xk6KKtIi7JA/U8MdruSxxMI/AAAAAAAAdQM/aKG8J3BXnUs/s1600/4.jpg"
      tabindex="0"
      width="650"></amp-img>
Kamu bisa mengganti URL Image sesuai gambar yang kamu inginkan.

Menyisipkan Vidio Youtube
<amp-youtube
     data-videoid="ID VIDEO YOUTUBE"
     height="270"
     layout="responsive"
     width="480"></amp-youtube>

Menyisipkan Slider Beberapa Gambar
<amp-carousel width="400"
      height="300"
      layout="responsive"
      type="slides">
    <amp-img src="https://4.bp.blogspot.com/-v-y2hJEU49E/V-zSdVlbYRI/AAAAAAAAoAw/Gy0SGRDo6jAYOzFrWa7tb_L_uCGRftZWwCLcB/s1600/image1.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="https://2.bp.blogspot.com/-Am-eNX5IZWw/V-zSdUZ9NrI/AAAAAAAAoA0/4u1Q4tMiPpcuFHeSDbLbHJA8wEa8zOrngCLcB/s1600/image2.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="https://4.bp.blogspot.com/-rxREfSseAik/V-zSdgi92wI/AAAAAAAAoA4/80A0ZH_nEXAMe5jgjFtqDmZ5LFISzW4fQCLcB/s1600/image3.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
  </amp-carousel>

Tag yang harus dihindari didalam postingan
Untuk menjaga validnya AMP maka kamu harus menghindari pernulisan HTML dengan CSS Inline seperti <div style="text-align: justify;">...</div> ataupun memasukkan javascript maupun css dalam postingan kamu.

Google Analytic
Untuk google analytic kamu bisa mengganti kode UA-XXXXX-Y dengan kode yang kamu dapatkan pada Google Analytic kamu.
<script type='application/json'>
{
  &quot;vars&quot;: {
    &quot;account&quot;: &quot;UA-XXXXX-Y&quot;
  },
  &quot;triggers&quot;: {
    &quot;trackPageview&quot;: {
      &quot;on&quot;: &quot;visible&quot;,
      &quot;request&quot;: &quot;pageview&quot;
    }
  }
}
</script>

Icon Link External
Untuk pengecualian link internal di postingan agar tidak memiliki ikon link eksternal, silahkan ganti URL pada css di bawah ini dengan URL blog kamu. Ada 2 kelompok CSS untuk postingan desktop dan postingan mobile, silahkan ganti dua-duanya.
.post-body .separator a:after,.post-body a[href^="https://kompidesign.blogspot.com/"]:after,.post-body a[href^="https://twitter.com/intent/tweet"]:after{content:'';background:none;width:0;height:0;margin-left:0}

Hapus Quick Edit
Sama seperti template terdahulu, kode <b:include name='quickedit'/> sangat berpengaruh pada validnya sebuah template, begitu juga pada template AMP ini, jadi kamu harus menghapus kode tersebut setiap selesai menambahkan widget baru disidebar maupun di footer.

Edit CSS
Kalau kamu yang ingin mengedit tampilan, ingat untuk CSS ada 2 bagian tiap-tiap halamannya. Untuk homepage ada CSS untuk tampilan desktop dan homepage untuk untuk tampilan mobile begitu pun untuk halaman postingan dan static, jadi edit dua-duanya. Untuk desktop berarti mobile false, dan untuk mobile berarti mobile true. Berasa kan ribetnya menggunakan AMP.

Semoga Bermanfaat.
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