Kompi Design With Google AMP Blogger Template

Kompi Design With Google AMP Blogger Template - Assalamualaikum sobat blogger, jumpa kembali dengan saya di Andrie Brader. Sebelumnya saya membagikan template AMP buatan Kang Ismet. Sekarang saya akan membagikan template AMP buatan Kang Adhy Suryadi. Template AMP ini bernama Kompi Design With Google AMP Blogger Template.

Pada tanggal 24 Februari 2016 kemarin. Google secara resmi telah mengintegrasikan AMP ke dalam hasil pencarian mobile.

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 yang akan memaksimalkan pemuatan halaman website kita. Dan bagi website yang menggunakan AMP ini tentunya akan memiliki perbedaan ketika diakses.

Baca juga : AMP HTML Blogger Template

Dan akhir-akhir ini Google terus mendorong para blogger untuk mengunakan AMP agar mempermudah pengguna mobile dalam mengakses informasi dari website di internet.

Namun Google menegaskan bahwa ini bukan sesuatu yang dapat menentukan peringkat untuk sebuah situs. Namun Google akan memberikan label AMP (Petir).

Baca Juga : Flashback Responsive Simple Blogger Template

Fitur-Fitur Kompi Design AMP Blogger Template

Responsive Design
AMP Ready
HTTPS Support
Valid HTML 5
Valid CSS3
Print Page Ready
HCard Author Ready
Fast Loading in Mobile and Dekstop
Grid With Masonry in Home Page

Bagi kalian yang berminat dengan template ini, kalian bisa mengunduhnya dengan gratis dibawah ini.

Demo Download

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/AVvXsEj_14BNoAUqB1UIrQBCozqeA6E2rJFfZweR3zu4ZX0mnXbWnbMWrCX5Qbqq-fQmv9xG_wQ3klnOF36pxioO370WYCP_6ap9eDZ5b_SDQJBbqxuD6hyphenhyphenrYWNcx4E-UaCU-kGNTtqEptQs7psF/s1600/logo-kd2.png' width='30'/> <data:title/></span></a>

</b:includable>

2. Mengganti Komentar Disqus

Karena komentar blogger sendiri belum support dengan AMP, maka dari itu kita harus menggunakan komentas Disqus yang sudah support. Silahkan ganti kode kompi-design pada kode di bawah ini dengan username Disqus blog kalian.


              <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/AVvXsEij4YeDBKvCKIxDMeHkO0v1YrL4eroXCS6Mh0pHFAOuRXAeqj1pOBllXWCLAI1cJIOg6jklLjebN-OZdcHqskaKC4zXcB03v6l9JH0A_4WaNPv54BQ7Fi1ScU0E98dmE5eAiL9eODdr_1WP/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/AVvXsEjJo0TUBRYW_AJn8GylBJAH6QgTYAUi4NhDn6ED7HnGWpW_4_qpcpOtq4ssnAl8LYS7xlp74vrEqDN4auzBp71kMSV7fX_bYihpDA7ddjv_DFUGCh6PqOFUJAmWs4RnJVN9KADlfOyt5bN8/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/AVvXsEij4YeDBKvCKIxDMeHkO0v1YrL4eroXCS6Mh0pHFAOuRXAeqj1pOBllXWCLAI1cJIOg6jklLjebN-OZdcHqskaKC4zXcB03v6l9JH0A_4WaNPv54BQ7Fi1ScU0E98dmE5eAiL9eODdr_1WP/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/AVvXsEjFuvLaDZ1nfvPAeiEstrAs26eoNkRGA3IKYs0hwn8IoEygr8mXi-8Wm36rSvdEcpqQrEwMja7jZvFiBWwAFpHejHjrAHLWzNTA15UCzSZXy8QVXwCBsS7QZIpP-oL0uSpxLWxL6ElVvGM/s1600/4.jpg" width="650" height="350" alt="Curabitur placerat est sem"/></noscript>

</div>

B. Menyisipkan gambar lainnya.

<amp-img

      alt="Curabitur placerat est sem"

      height="350"

      layout="responsive"

      on="tap:lightbox1"

      role="button"

      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFuvLaDZ1nfvPAeiEstrAs26eoNkRGA3IKYs0hwn8IoEygr8mXi-8Wm36rSvdEcpqQrEwMja7jZvFiBWwAFpHejHjrAHLWzNTA15UCzSZXy8QVXwCBsS7QZIpP-oL0uSpxLWxL6ElVvGM/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/AVvXsEinE7h2Z2C3NmwFVF0henoNwyqltYArMZ6SGBLxl9e2wwSboLoHm-SLvDcLLjXIMi0Me4XtsXTb5STJJyJMECLC1PuYHWs5d9HxXwmcL3i7mFfgBpGbitFcaEO0TLIa9HJmeyfjTnltQG39/s1600/image1.jpg"

        width="400"

        height="300"

        layout="responsive"></amp-img>

    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMrVFBrYNAShw28GioquahV0rIup4TtA5qj3_0BhoT9-fyHtD090qT4CQTau6gzvnFrCfgQ9LddY85YkvgxmbEpXmHsqDArl7jjJYbSFnxJrEQATtXlaiyV1JA4DZWbR3ukhjIypeL5m8e/s1600/image2.jpg"

        width="400"

        height="300"

        layout="responsive"></amp-img>

    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi93j8V31t2NrLK45BzxYeUWMhbnEIhB9SvLRsgGBNIysiGgbeJPqlS4iBJTMYlxH5RcdIbgDU6xA3UbJks1_QkxNG_s4Y87EDDxZb-s2L0ZpoKLCpG7Zch8RyZ9D_7jfHTAtTGCt1pMxYu/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.

5. Google Analytic

Untuk Google Analytic silahkan ganti kode UA-XXXXX-Y dengan kode akun Google Analytic blog kalian.


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

6. 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 kalian. 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}

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

8. Edit CSS

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