Free Template Blogger With AMP Premium

Disini saya akan membagikan download template blogger yang sudah didesain dengan tampilan AMP, dengan fitur dan keunggulan dalam masalah loading blog, sebenarnya template ini gratis namun rasanya adalah premium, karena template ini elegan dan terlihat mahal serta menarik, Kompi Design adalah salah satu template buatan Kompiajaib yang dengan indahnya membuat suatu template dengan fitur AMP, fitur keren amp adalah dengan pemuatan statis AMP HTML, GOOGLE AMP CHACHE dan AMP JS, jadi sangat cepat loading blognya karena with AMP.

Google sendiri sangat merekomendasikan dengan penggunaan pemakaian blog dengan tampilan template APM, karena sangat menguntungkan bagi pengguna android seperti tablet ponsel, beserta pemuatan video konten grafisnya juga sangat mudah, bisa saja template ini juga meningkatkan seo blog anda dengan adanya template ini.

SARAN

Gunakan template ini pada blog baru karena akan eror amp jika dipakai blog lama, kecuali anda bisa mengotak atik AMP html untuk video dan image atau lainya.

DEMO

UNDUH

 Custom :


1. Editor Blog Logo
Ukuran 30px x 30px dengan mengganti url image pada yang tertera dibawah.

          <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/AVvXsEiCa_f4xgnhiZXH0n6UZA9cDXXsjjDZXI-5Kfda4Xxf03DL8lzM6xIsMKaq7KgrFI9d4liuR2pzeW9o4UAQVd2ng4joukLoFbfre8CwLWDcgmC43wwFYX9YOUMPnSQdRX5osWqOY9WA28Ij/s1600/logo-kd2.png' width='30'/> <data:title/></span></a>
</b:includable>

2. Disqus Comment Editor

kompi-design silahkan anda ganti pada letak username disqus.

              <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. Penempatan Iklan

> Header

<div class='headerad'>
<amp-img alt='Header Ads' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9abnZ0LRW0lZHqls8Y3bVyEjFQ7M-puLJLpXcFA4yOus6bUJH-yu-Q5_AwRz1ddB5B6ekxLoMglCkaHwEUz9PiXUQG_9d8EWTLAIK1_jJ159ln2GR34CdeK7F3X2oO8FtnLApPlLwT6D/s1600/ads.jpg' title='Header Ads' width='728'/>
<div class='clear'/>
  </div>

> Atas Posting Ukuran 300 x 250

<div class='postabovead'>
<amp-img alt='Sidebar Ads' height='250' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_FU3zOjeAZ9p25tkpul2jKsbhWRT1xjjlSBNA2OU2vYmqrEciSOwHxIgBevX1fSKJsvEhmxbpaosje9bP-yTpBVWmiVQlRkKigv48m_oD_As6t1CokRwgkxgjD-yCBtV5w2HMEVVGNY0e/s1600/ads2.jpg' title='Sidebar Ads' width='300'/>
</div>

> Bawah Posting
Jika gambar baner ganti url tersebut, jika adsense maka ganti amp-img dengan amp-ad disini

<div class='underpostad'>
<amp-img alt='Under Post Ads' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9abnZ0LRW0lZHqls8Y3bVyEjFQ7M-puLJLpXcFA4yOus6bUJH-yu-Q5_AwRz1ddB5B6ekxLoMglCkaHwEUz9PiXUQG_9d8EWTLAIK1_jJ159ln2GR34CdeK7F3X2oO8FtnLApPlLwT6D/s1600/ads.jpg' title='Under Post Ads' width='728'/>
<div class='clear'/>
  </div>

Postingan :

1. Logo Blog
Ganti url image dengan logo anda berukuran 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/AVvXsEiCa_f4xgnhiZXH0n6UZA9cDXXsjjDZXI-5Kfda4Xxf03DL8lzM6xIsMKaq7KgrFI9d4liuR2pzeW9o4UAQVd2ng4joukLoFbfre8CwLWDcgmC43wwFYX9YOUMPnSQdRX5osWqOY9WA28Ij/s1600/logo-kd2.png' width='30'/> <data:title/></span></a>
</b:includable>

2. Penyisipan 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/AVvXsEigE3APD7UjUPzF2RAeb3-bAkQ8BNGDjTh4CENnKtmGSV40dbLPfAavtGHQJrYo5oaiOvbczSEYtgh1pZrSk21IDdC3JcNASK_sEaw8FsciBx_r2-Nt28WgXKys9WlethR6RFYtChZUqac/s1600/4.jpg"
      tabindex="0"
      width="650"></amp-img>

Kode tersebut secara otomatis dengan lightbox amp yang ketika pengunjung melakukan klik akan jadi fullscreen.

3. Menyisipkan Video Youtube

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

4. Untuk Beberapa Gambar Slide

<amp-carousel width="400"
      height="300"
      layout="responsive"
      type="slides">
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaXe50J-Hkkd3Q5HYofA-JN9e6yZ2-tCcSwHMGiOLFyqIfXBPeN9StjZxLK2Lb-qHPP4sLgqlrSM9W_z3HnQ9kBjQ6BI-z1eK1NNOykCI2ROePOvEjCh_b90_idy5QKXwDjejqs4GpPlCP/s1600/image1.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_aB3jla-vQyL530hugSOjdY1x7ZTYyxdKJ0feyDZdDm4sueAJej-g1N1IvcQedTYH94sYLM5AIPeaYVByOY0d3g1kgkz3yb575ljNYbms-JhRaFO0aKTVjwt8SBL3qRPr0-vC1WHG-ai/s1600/image2.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCI1uJd5wUzVvIKerlQhntl7T6DhZ4_kg_HoiWkpGJzeJn7xve4UuVGyILqQIs97QEzgBnTQyyY5Kyh-yI3qSTVws9x6-4WYgtbvCB39ggmXBEidcY0DT6iXVyadPVdPW3vT6OXlX0koZY/s1600/image3.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
  </amp-carousel>

5. Jangan pernah menggunakan e tag inline dengan nama "style"

6. Pemasangan Google Analisis
Ganti dengan kode analisis anda pada UA-XXXXXX

<script type='application/json'>
{
  &quot;vars&quot;: {
    &quot;account&quot;: &quot;UA-XXXXXX-Y&quot;
  },
  &quot;triggers&quot;: {
    &quot;trackPageview&quot;: {
      &quot;on&quot;: &quot;visible&quot;,
      &quot;request&quot;: &quot;pageview&quot;
    }
  }
}
</script>

7. Pengecualian Pada Link Internal
Didalam postingan bisa mengecualikan link dengan css berikut:

.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'
Hapus kode ini agar tidak eror d template b:include name='quickedit'/>

9. Pengeditan Tmpilan CSS
CSS AMP ada dua bagian, bagian dekstop dan mobile berbeda, hati hati dalam pengeditanya.