Template Kompi Design Google Amp Responsive

IwanBerbagi.com – Dunia blogger mengalami perkembangan yang begitu pesat, padahal saya belum hebat dalam HTML yang biasa dan kini sudah hadir pula project gres google yang mengusung HTML yang sangat ngebut diseluruh perangkat, project ini disebut AMP Google.

 Dunia blogger mengalami perkembangan yang begitu pesat Template Kompi Design Google AMP Responsive
Tampilan Template Droid Plus Template AMP (DEMO)

Fitur ini terdiri dari AMP JS, AMP HTML, dan GOOGLE AMP CACHE yang akan memaksimalkan pemuatan halaman website kita. Dan bagi website yang memakai AMP ini tentunya akan mempunyai perbedaan dikala diakses. Akan ada lambang petir yang saya sanggup katakan keren, jadi pengguna akan memilih pilihannya dikala ingin membuka suatu web.

Pada gambar dan klarifikasi diatas saya rasa kau sudah sanggup mengerti perbedaan fundamental yang ada pada project gres google ini, namun untuk kau yang gak suka ribet niscaya tidak akan suka memakai template ini, dikarenakan template AMP ini mengharuskan kau untuk mengedit satu persatu postingan kau biar sanggup terbaca dengan baik pada mode AMP.

Terima kasih untuk kang Adhy dan kang Ismet selaku orang yang kreatif dalam menciptakan template ini, dan terima kasih kedua kalinya untuk Kang Adhy yang telah membagikannya secara gratis (ditunggu yang versi premiumnya kang). Semoga bermanfaat buat kita semua dan sanggup kita pelajari.

Berikut ini beberpa pengaturan yang harus kau lakukan kalau ingin memakai template AMP ini :

Mengganti Logo Blog
Untuk mengganti logo, kau hanya perlu mengganti URL Image pada isyarat dibawah ini 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://4.bp.blogspot.com/-2p-LDa2l2vQ/V-x2SveBi9I/AAAAAAAAn9o/oiupdYw6CgQxat9RtH8qjoZ9mfJYCRiSgCLcB/s1600/logo-kd2.png' width='30'/> <data:title/></span></a> </b:includable>

Mengganti Komentar Disqus
Karena komentar blogger sendiri belum support dengan AMP, maka dari itu kita harus memakai komentas Disqus yang sudah support. Kamu hanya perlu megganti isyarat username disqus dengan punya kau sendiri.

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

Perhatikan yang sudah saya berikan block warna merah tersebut.

Baca Juga:  Is Rice Water the response to Hair Breakage?

Template Iklan
Ada daerah iklan yang memungkinkan kau untuk meletakkan iklan yang baik. Cari kode-kode dibawah ini dan sesuaikan.

Iklan Header

<div class='headerad'> <amp-img alt='Header Ads' height='90' src='https://4.bp.blogspot.com/-U8BOd1cfeXw/V-z24UcmKEI/AAAAAAAAoBM/cb7H0j_k8DAkxwg2cB9Y3F1ynZwu0emKQCLcB/s1600/ads.jpg' title='Header Ads' width='728'/> <div class='clear'/>   </div>

Iklan Diatas Postingan

<div class='postabovead'> <amp-img alt='Sidebar Ads' height='250' layout='responsive' src='https://3.bp.blogspot.com/-esrBMMHMH0I/V-0ArklIkUI/AAAAAAAAoBc/gsPpEXuRpXkYjXys1uSosh609qlzp1b6gCLcB/s1600/ads2.jpg' title='Sidebar Ads' width='300'/> </div>


Iklan Dibawah Postingan

<div class='underpostad'> <amp-img alt='Under Post Ads' height='90' src='https://4.bp.blogspot.com/-U8BOd1cfeXw/V-z24UcmKEI/AAAAAAAAoBM/cb7H0j_k8DAkxwg2cB9Y3F1ynZwu0emKQCLcB/s1600/ads.jpg' title='Under Post Ads' width='728'/> <div class='clear'/>   </div>

Untuk memasang banner, kau hanya perlu mengganti URL Image-nya. Jika ingin memakai adsense silahkan kau ganti amp-img dengan amp-ad menyerupai berikut ini :

<amp-ad width=300 height=250       type="adsense"       data-ad-client="ca-pub-2005682797531342"       data-ad-slot="7046626912">  </amp-ad>

Kamu hanya perlu sesuaikan parameter berikut ini :

  • data-ad-client
  • data-ad-slot
  • data-ad-host
  • data-adtest
  • data-tag-origin

Membuat Postingan
Untuk postingan ada beberapa hal yang harus kau perhatikan dan lakukan yaitu gunakan HTML pada postingan kamu, simpan HTML dibawah ini da simpan paling atas pada artikel kamu.

<div class="thumb-post"> <noscript><img src="https://2.bp.blogspot.com/-Xk6KKtIi7JA/U8MdruSxxMI/AAAAAAAAdQM/aKG8J3BXnUs/s1600/4.jpg" width="650" height="350" alt=" Dunia blogger mengalami perkembangan yang begitu pesat Template Kompi Design Google AMP Responsive"/></noscript> </div>

Setelah isyarat tersebut guna memanggil gambar pertama yang ada pada postingan, namun kalau kau menginginkan gambar lainnya kau sanggup memakai isyarat berikut ini yang sudah dilengkapi dengan automatis lightbox amp dikala gambar diklik.

<amp-img       alt=" Dunia blogger mengalami perkembangan yang begitu pesat Template Kompi Design Google AMP Responsive"       height="350"       layout="responsive"       on="tap:lightbox1"       role="button"       src="https://2.bp.blogspot.com/-Xk6KKtIi7JA/U8MdruSxxMI/AAAAAAAAdQM/aKG8J3BXnUs/s1600/4.jpg"       tabindex="0"       width="650"></amp-img>

Kamu sanggup mengganti URL Image sesuai gambar yang kau inginkan.

Menyisipkan Vidio Youtube

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


Menyisipkan Slider Beberapa Gambar

<amp-carousel width="400"       height="300"       layout="responsive"       type="slides">     <amp-img src="https://4.bp.blogspot.com/-v-y2hJEU49E/V-zSdVlbYRI/AAAAAAAAoAw/Gy0SGRDo6jAYOzFrWa7tb_L_uCGRftZWwCLcB/s1600/image1.jpg"         width="400"         height="300"         layout="responsive"></amp-img>     <amp-img src="https://2.bp.blogspot.com/-Am-eNX5IZWw/V-zSdUZ9NrI/AAAAAAAAoA0/4u1Q4tMiPpcuFHeSDbLbHJA8wEa8zOrngCLcB/s1600/image2.jpg"         width="400"         height="300"         layout="responsive"></amp-img>     <amp-img src="https://4.bp.blogspot.com/-rxREfSseAik/V-zSdgi92wI/AAAAAAAAoA4/80A0ZH_nEXAMe5jgjFtqDmZ5LFISzW4fQCLcB/s1600/image3.jpg"         width="400"         height="300"         layout="responsive"></amp-img>   </amp-carousel>


Tag yang harus dihindari didalam postingan
Untuk menjaga validnya AMP maka kau harus menghindari pernulisan HTML dengan CSS Inline menyerupai <div style="text-align: justify;">...</div> ataupun memasukkan javascript maupun css dalam postingan kamu.

Baca Juga:  Si Edit V2 Fast Responsive Blogger Template

Google Analytic
Untuk google analytic kau sanggup mengganti isyarat UA-XXXXX-Y dengan isyarat yang kau dapatkan pada Google Analytic kamu.

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

Icon Link External
Untuk pengecualian link internal di postingan biar tidak mempunyai ikon link eksternal, silahkan ganti URL pada css di bawah ini dengan URL blog kamu. 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}

Hapus Quick Edit
Sama menyerupai template terdahulu, isyarat <b:include name='quickedit'/> sangat besar lengan berkuasa pada validnya sebuah template, begitu juga pada template AMP ini, jadi kau harus menghapus isyarat tersebut setiap jawaban menambahkan widget gres disidebar maupun di footer.

Edit CSS
Kalau kau yang ingin mengedit tampilan, ingat untuk CSS ada 2 bab 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. Berasa kan ribetnya memakai AMP.

Semoga Bermanfaat.
Sumber https://www.iwanberbagi.com