Kompi Design; Template Blogspot Terintegrasi Amp [Gratis]

Sebelumnya, telah membahas perihal apa itu AMP. Jika belum, silahkan dibaca 'Mengenal Accelerated Mobile Pages'. Sebagaimana diketahui bahwa Google akhir-akhir ini seakan mendorong para publisher untuk menciptakan 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, jikalau ringan di mobile, maka susukan 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 laba tersendiri bagi pemilik blog yang terintegrasi dengan AMP itu.

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

Kompi Design; Template Blogspot Terintegrasi AMP (Gratis)

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

DEMO1 - DEMO2 - DOWNLOAD

Kustomisasi

Untuk memperolah hasil yang maksimal, silahkan sobat 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/AVvXsEiOqi5M_t6QQma2jrBMDhmhpVN_J80f2HdaK6xCb0-ivjaaAHS6Q7V3XJOINTUVbbYcKVEoLylkWOl4Qh-37Tg9duRHt-xItnMAG1Ti7A1h05fUAqElNKEKfg-VqrMelkL72w5w_0fLgRgi/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='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=kompi-design&url=" + 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 menciptakan postingan, silahkan ikuti ketentuan berikut ini:
a. Thumbnail Postingan

<div class="thumb-post">
<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijG7xjThtAYna7GV2O-_57-sGdURyzLwVKkWxG5ysnjk9mUa8ieKYWYfjkCpikl0hBkIA5klHN8aeiUOTGRcD_WH-Swj0MLTb60NzU2LDegyyMuKnNtnYDGtpugZT5_O97FzzDAzfbyNE/s1600/4.jpg" width="650" height="350" alt=" Sebagaimana diketahui bahwa Google final Kompi Design; Template Blogspot Terintegrasi AMP [Gratis]"/></noscript>
</div>

b. Menyisipkan Gambar Lainnya

<amp-img
      alt=" Sebagaimana diketahui bahwa Google final Kompi Design; Template Blogspot Terintegrasi AMP [Gratis]"
      height="350"
      layout="responsive"
      on="tap:lightbox1"
      role="button"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijG7xjThtAYna7GV2O-_57-sGdURyzLwVKkWxG5ysnjk9mUa8ieKYWYfjkCpikl0hBkIA5klHN8aeiUOTGRcD_WH-Swj0MLTb60NzU2LDegyyMuKnNtnYDGtpugZT5_O97FzzDAzfbyNE/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/AVvXsEiQOOy5Lr7X-5WJzVk504z-AJPIlyG79M-0z9InVF_DOjTun3Rjw8Z0BeGDWL5P9yH5fRE6QCeccGuCbd9T5esNpks-f9EGxrAZFyP4RAmEeaueosrXz9EmKnIyfHkunu_waPX9PVphmD6E/s1600/image1.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEherV4brHMJypYOXOsjDiLAHeR2r09ilhLS2cUiHFy4Zai-2N0pfpQ6d04ND0_3fjmaQutjxSGyH17GtjJZP9F71ai0QJtt_K9CvZikkeGMscwSlMRvlA4ghT1C3TFIv1zNGMFgC1sIyyEF/s1600/image2.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdG_2rHRpgBaDVXewY6uLy-4JrBT1XkZ627GTw4uK3De2F1S5S6IzazxqK5dPqehhvZU3srJaeESH7vScu2uy0Upg27Q3ISpS_TyJUTMTCzs0Os2tleqS5lBaG2E5iC5a5bWKzoVm9bAmH/s1600/image3.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
</amp-carousel>

5. Memasang Google Analytis

Silahkan ganti arahan google analytis dengan ID Anda.

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

Demikian klarifikasi perihal Kompi Design; Template Blogspot Terintegrasi AMP (Gratis). Semoga bermanfaat untuk sobat semua.
Sumber https://www.blog.pustakamadrasah.web.id/

Stories From Heart

Senin, 16 Januari 2017