-->

jika sobat tertarik dan ingin mencoba Blogger dengan Google AMP silahkan unduh Kompi Design Blogger Template with Google AMP pada halaman ini. Untuk versi pertama template ini saya bagikan secara gratis, namun untuk update versi selanjutnya adalah PREMIUM.
Saran saya gunakan template ini untuk blog baru, karena jika digunakan pada blog lama maka AMP akan error, kecuali jika Anda edit semua postingannya unuk menyesuaikan dengan AMP html untuk image, video, dan lainnya.

AMP adalah sebuah cara untuk membangun sebuah halaman web untuk konten statis yang dapat dimuat secara cepat yang dibangun dengan tiga bagian yang berbeda yaitu AMP JS, AMP HTML, dan GOOGLE AMP CACHE. AMP atau Accelerated Mobile Page adalah proyek Google yang dibuat sebagai standar untuk publisher untuk memiliki halaman yang dapat dimuat dengan cepat pada perangkat mobile yang pada tanggal 24 Februari 2016, Google secara resmi telah mengintegrasikan AMP ke dalam hasil pencarian mobile.




Kustomisasi


1. Mengganti Logo Blog
Silahkan ganti URL image pada kode di bawah ini. Silahkan buat logo 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilXziTc6KSAHydwH97nCzZoUaYV4wmmcdjZdveXTUGvT73tK4HdN4nCvDwEy2FssMzWACjNHBzNMsLVR7xg-9GIzdiZ-2J1PaLxCvKlyFEizlfufOC_O_3wnAhHBeedOvTmz-JArOpzt5N/s1600/logo-kd2.png' width='30'/> <data:title/></span></a>
</b:includable>
2. Mengganti Komentar Disqus
Silahkan ganti kode kompi-design pada kode di bawah ini dengan username Disqus blog Anda.
   <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>
3. Tempat Iklan

A. Iklan header
<div class='headerad'>
<amp-img alt='Header Ads' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0V6POT82FuZbwFwloxluhxuZuU_ZI2bMYKATbFuzjJcejRsJhMBByanvD3IQUWCG8b1MLfkQIOqigyt7XaAqeEPgiR0mH2b-28IMzsu2mFf2zN-f33K3sTcXWOkn27cXXMEvSPyRhoWh/s1600/ads.jpg' title='Header Ads' width='728'/>
<div class='clear'/>
  </div>
B. Iklan di atas postingan (300 x 250)
<div class='postabovead'>
<amp-img alt='Sidebar Ads' height='250' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2nhxrHRQDF4KEJYnGhdws1vsfTDriCJCu1GHqrZcufbhNfq6b5WoGtipgHMPq5f1NCuM6v6YJL5mchz3kNxnSYpI0zMaPJLTUZeGSrDZe4m_Z-2_RYTCWbZpVyDOsDvT2BhZiokeJd5_-/s1600/ads2.jpg' title='Sidebar Ads' width='300'/>
</div>
C. Iklan di bawah postingan
<div class='underpostad'>
<amp-img alt='Under Post Ads' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0V6POT82FuZbwFwloxluhxuZuU_ZI2bMYKATbFuzjJcejRsJhMBByanvD3IQUWCG8b1MLfkQIOqigyt7XaAqeEPgiR0mH2b-28IMzsu2mFf2zN-f33K3sTcXWOkn27cXXMEvSPyRhoWh/s1600/ads.jpg' title='Under Post Ads' width='728'/>
<div class='clear'/>
  </div>
Jika untuk memasang banner, silahkan ganti URL image nya. Jika ingin menggunakan Adsense silahkan ganti amp-img dengan amp-ad, silahkan kunjungi amp-ad untuk Adsense.

4. Membuat postingan
A. Thumbnail untuk postingan, silahkan gunakan html di bawah ini dan simpan di paling atas.
<div class="thumb-post">
<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipd30AvBs5EtNYIq1OxWjZAn12DuNkZYg3XfAPLVMfTrW7Bq6JPZnoSrlbAb4uhrSft6-gj5vqSzUFHWxF-eSbZbv-tAsIS957DQX-0GkfjRXSEu_4hZiANS-hoOfcxTQHmm8AJrnY6hg/s1600/4.jpg" width="650" height="350" alt="Curabitur placerat est sem"/></noscript>
</div>
B. Menyesipkan gambar lain
<amp-img
      alt="Curabitur placerat est sem"
      height="350"
      layout="responsive"
      on="tap:lightbox1"
      role="button"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipd30AvBs5EtNYIq1OxWjZAn12DuNkZYg3XfAPLVMfTrW7Bq6JPZnoSrlbAb4uhrSft6-gj5vqSzUFHWxF-eSbZbv-tAsIS957DQX-0GkfjRXSEu_4hZiANS-hoOfcxTQHmm8AJrnY6hg/s1600/4.jpg"
      tabindex="0"
      width="650"></amp-img>
Dengan kode di atas maka gambarnya otomatis menggunakan lightbox amp, ketika gambar diklik maka akan menjadi full screen.

C. Menyisipkan video Youtube
<amp-youtube
     data-videoid="ID VIDEO YOUTUBE"
     height="270"
     layout="responsive"
     width="480"></amp-youtube>
D. Menyisipkan slider untuk beberapa gambar
<amp-carousel width="400"
      height="300"
      layout="responsive"
      type="slides">
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7tVOVoqY4gOIMuX8bM8FJm8vGOOe6wo4i9vAZ8ZkNfRuRHYtbeIlgpmtHdyW0vJBcyCXW9qYaxYRZm35ctbhi-d6Kw5HMy8qs3cCeeNxDbVQHTwcjB8EC-M6TippC67nnw3b3wT-sSHQ/s1600/image1.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9maohyphenhyphenl36StIVMKSS5Pf_WQB0QSy6s9JPdsVrI6yxIB4mLldpZCQFsjn6PdyO4lOUlvlPkh82911gI2-eo914Tmq4UbTQk1aAcKF-JszfK7leFR_wmk_IfAJFBpX1Sw1JDZ_zKI7-_H-Q/s1600/image2.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2SX-R521bJDdy2NafhjMJy4DzBYH3S1C5uynS26QJaPYLC_oRfVcXVr6VV2mu8T3ACK9pNWIeUJHueBa6kBroHBk3BwHNJUxfMik7lKBtbSWVIx6reqjrzpb263WTLDCZvwyYjvPboA9F/s1600/image3.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
  </amp-carousel>
E. Tag yang harus dihindari di postingan
Hindari penggunaan tag HTML dengan CSS inline seperti <div style="text-align: justify;">...</div> ataupun lainnya. atau memasukan javascript atau CSS style ke dalam postingan.

Baca juga : Free Tamplate AMP HTML Dari Kang Ismet

5. Contact Form
Untuk menampilkan contact form nya silahkan gunakan kode HTML di bawah ini.
Silahkan ganti your@email.co dengan alamat email Anda

<form action="https://formspree.io/your@email.com" method="POST" target="_blank" name="sentMessage" id="contactForm">
    <div class="styled-input">
      <div class="styled-input-in">
      <input type="text" name="name" required="required" />
      <label>Name</label>
      <span class="span1"></span><span class="span2"></span> </div></div>
    <div class="styled-input">
      <div class="styled-input-in">
      <input type="email" name="_replyto" required="required" />
      <label>Email</label>
      <span class="span1"></span><span class="span2"></span> </div></div>
    <div class="styled-input">
      <div class="styled-input-in">
      <input type="text" name="_subject" required="required" />
      <label>Subject</label>
      <span class="span1"></span><span class="span2"></span> </div></div>
    <div class="styled-input wide">
      <div class="styled-input-in">
      <textarea name="message" required="required"></textarea>
      <label>Message</label>
      <span class="span1"></span><span class="span2"></span> </div></div>
    <button type="submit" class="btn btn-default">Send</button>
  </form>

6. Google Analytic
Untuk Google Analytic silahkan ganti kode UA-XXXXX-Y dengan kode akun Google Analytic blog Anda.
<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>
7. Ikon link eksternal di postingan
Untuk pengecualian link internal di postingan agar tidak memiliki ikon link eksternal, silahkan ganti URL pada css di bawah ini dengan URL blog Anda. 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}
8. Hapus Quickedit
Jika menambahkan widget baru di sidebar atau di footer, silahkan hapus kode <b:include name='quickedit'/> karena itu akan menyebabkan error pada AMP.

9. Edit CSS

Kalau Anda 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.

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 Hide Parser

Tambahkan Komentar Tutup Komentar

Disqus Comments