Template Blogspot AMP: Kompi Design [FREE]

Sebelumnya, Kami telah membahas tentang apa itu Google AMP. Jika belum, silahkan dibaca 'Mengenal Accelerated Mobile Pages'. Sebagaimana diketahui bahwa Google akhir-akhir ini seakan mendorong para publisher untuk membuat websitenya terintegrasi dengan AMP.

Mengapa Perlu Terintegrasi dengan Accelerated Mobile Pages (AMP)?

Karena website yang terintegrasi dengan AMP otomatis akan menjadikannya ringan dan cepat untuk diakses di media mobile. Secara logika, jika ringan di mobile, maka akses lewat desktop pun lebih ringan. Walau google tidak pilih-pilih dalam hasil penelusuran, namun google memberi tanda 'PETIR' kepada pengunjung web yang sudah terintegrasi dengan AMP. Ini tentu menjadi keuntungan tersendiri bagi pemilik blog yang terintegrasi dengan AMP itu.

Namun memang dalam kenyataannya, membuat blog atau pasnya template blog yang terintegrasi dengan AMP sangatlah sulit dan jarang kita dapatkan.

Kompi Design; Template Blogspot Terintegrasi AMP (Gratis)

Seiring sulitnya membuat template berbasis Accelerated Mobile Pages (AMP), ternyata kang Adhy Suryadi membagi tempate blogspot terintegrasi AMP secara gratis kepada kita. Jika sahabat ingin melihat demo dan juga ingin mendapatkannya, silahkan langsung lihat saja demo dan downloadnya di bawah ini. Sebuah template yang keren dan tentunya fantastis.

DEMO - DOWNLOAD

Kustomisasi

Untuk memperolah hasil yang maksimal, silahkan sahabat mengkostumisasi template di atas sebagai berikut:

1. Mengganti Logo Blog

Silahkan ganti URL berikut dengan ukuran 30px kali 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/AVvXsEiQsz8MAvmfctU6ViXr-TWPSBlmKvYNBLSkFXw3Qq46UQ6unuljqepI7AtxOAaQccENDiQtJlOYaBr2-eocMVFm3p3N_W_tj0XZR78NPJAjFmBtUdI_i_l7f0u6YrrejxgYClSxE-mxxEVZ/s1600/logo-kd2.png' width='30'/> <data:title/></span></a>


</b:includable>

2. Mengganti Komentar Disqus

Silahkan mengganti kompi-design dengan user disqus 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

Ada 3 iklan di dalam template, silahkan diganti dengan baik. Tiga iklan tersebut berada di header, atas postingan, dan bawah postingan.

4. Membuat Postingan

Untuk membuat postingan, silahkan ikuti ketentuan berikut ini:
a. Thumbnail Postingan

<div class="thumb-post">


<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwkYVdEl91ZC8IZDlnms8IsJU4-rGvO1wGuTPvKR-CU5EEyxxiThe2kzFTnZ1RGNH-0FPJW_-x-8xHLR4I89PHvwGHs8AwIxTcGD1ZJUDCLSgt2H0aCL3xrt9MI5L9nQ0NdNgDhSQ_muM/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/AVvXsEgwkYVdEl91ZC8IZDlnms8IsJU4-rGvO1wGuTPvKR-CU5EEyxxiThe2kzFTnZ1RGNH-0FPJW_-x-8xHLR4I89PHvwGHs8AwIxTcGD1ZJUDCLSgt2H0aCL3xrt9MI5L9nQ0NdNgDhSQ_muM/s1600/4.jpg"


      tabindex="0"


      width="650"></amp-img>

c. Menyisipkan Video Youtube

<amp-youtube


     data-videoid="ID VIDEO YOUTUBE"


     height="270"


     layout="responsive"


     width="480"></amp-youtube>

d. Menyisipkan Slide Gambar

<amp-carousel width="400"


      height="300"


      layout="responsive"


      type="slides">


    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JPTXtRiihRgVbL3q7M8U2lngicxVj_2cnVLtpWasMU2pHINyVLw2FDrjbrqkHDls16D6ZfOti4zzkCXJSXw1Ryz2TZqcM1NNY5-ukEbyr8yUhtmR7j1CtTrKgGhEdHPA8Ij1E26sdrGx/s1600/image1.jpg"


        width="400"


        height="300"


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


    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEo2F6Il-n9oCd8J26kCneDnW0ajW1SmsCkM75SIf1F15hC3ftZmqYNQt8LyxXNCXQqmDxwwaCOV-lii9CXap1q0zX230_Lc_dWJjcfU4Ofy8SBQYKUqivQdmlMpC-734irqGjJJoCjeMt/s1600/image2.jpg"


        width="400"


        height="300"


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


    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0T1tusZXy0p1hKcbtBqVLi0BzOKFK1HqLtlzWFMs-Ju88HiEg2L82D_6TfK33q5nrqQmz8xHZ1ZfPrERit1duMW6IWM5xZMS8sXSGUS4p15zPuNio_W_uEMPNsEpYaUg_KzbsElp0Khsg/s1600/image3.jpg"


        width="400"


        height="300"


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


  </amp-carousel>

5. Memasang Google Analytis

Silahkan ganti kode google analytis dengan ID 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>

Demikian penjelasan tentang Template Blogspot AMP: Kompi Design (Gratis). Semoga bermanfaat untuk sahabat semua.