Template Kompi Design Google AMP Responsive + Seo Friendly

Mangobetdown.blogspot.com - Dunia Blogger Memang mengalami perkembangan yang begitu signifikan dan pesat . padahal saya belum mahir dalam HTML yang biasa dan sekarang sudah hadir pula project baru google yang mengusung HTML yang sangat ngebut diseluruh perangkat, project ini disebut AMP Google.

Fitur ini terdiri dari 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. Akan ada lambang petir yang saya bisa katakan keren, jadi pengguna akan menentukan pilihannya ketika ingin membuka suatu web.

DEMO | DOWNLOAD

Pada gambar dan penjelasan diatas saya rasa kamu sudah bisa mengerti perbedaan mendasar yang ada pada project baru google ini, namun untuk kamu yang gak suka ribet pasti tidak akan suka menggunakan template ini, dikarenakan template AMP ini mengharuskan kamu untuk mengedit satu persatu postingan kamu agar bisa terbaca dengan baik pada mode AMP.

Berikut ini beberpa pengaturan yang harus kamu lakukan jika ingin menggunakan template AMP ini :

Mengganti Logo Blog


Untuk mengganti logo, kamu hanya perlu mengganti URL Image pada kode dibawah ini dengan ukuran 30px x 30px. 

HTML<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/AVvXsEhT2t5lIA13HzxWGnM4VyyFYJV_-tErTbf4uCtbBnVh7Z1dXEkgg-dz-s1LdD0J6s4TpmbnAs9yLFRDoeirgfcL1iFDXFGpWh4n5USSJsNPl4vDZDulw1m1U28x5W36XRIWsEbAQH8wbKTf/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 menggunakan komentas Disqus yang sudah support. Kamu hanya perlu megganti kode username disqus dengan punya kamu sendiri.

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

Template Iklan

Ada tempat iklan yang memungkinkan kamu untuk meletakkan iklan yang baik. Cari kode-kode dibawah ini dan sesuaikan.

Iklan Header 

HTML<div class='headerad'>
<amp-img alt='Header Ads' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2BacV_-Sz6dF5LEL2y36aEfW388yyoFQ92M9RDakkViU_Z-bZA_KTNoyEAZ-TtZVxpGaM_B1gz-TYyo7ixc0FH549E3LEcS_3BDMT-ecnKpzBC69aNA_mhqRIB5Cc4wmf2fZSMEqhZcz/s1600/ads.jpg' title='Header Ads' width='728'/>
<div class='clear'/>
  </div>

Iklan Diatas Postingan 

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

Iklan Dibawah Postingan 

HTML<div class='underpostad'>
<amp-img alt='Under Post Ads' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2BacV_-Sz6dF5LEL2y36aEfW388yyoFQ92M9RDakkViU_Z-bZA_KTNoyEAZ-TtZVxpGaM_B1gz-TYyo7ixc0FH549E3LEcS_3BDMT-ecnKpzBC69aNA_mhqRIB5Cc4wmf2fZSMEqhZcz/s1600/ads.jpg' title='Under Post Ads' width='728'/>
<div class='clear'/>
  </div>

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

HTML<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 kamu perhatikan dan lakukan adalah gunakan HTML pada postingan kamu, simpan HTML dibawah ini da simpan paling atas pada artikel kamu

HTML<div class="thumb-post">
<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UL4YeCEvm2oTMRRc1UynWRY1FQHZyBdVQn7MnM0I_nAl2hIgPrrF33TRyaS8uytc9oBZIjL9WgkBl8Kzi4AR4MBv55-FxDL3tTUy8rO0_V0xXXFMYpUcGSlQ6xRO3VWA_C0HKgV75dI/s1600/4.jpg" width="650" height="350" alt="Curabitur placerat est sem"/></noscript>
</div>

Setelah kode tersebut guna memanggil gambar pertama yang ada pada postingan, namun jika kamu menginginkan gambar lainnya kamu bisa menggunakan kode berikut ini yang sudah dilengkapi dengan automatis lightbox amp ketika gambar diklik. 

HTML<amp-img
      alt="Curabitur placerat est sem"
      height="350"
      layout="responsive"
      on="tap:lightbox1"
      role="button"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UL4YeCEvm2oTMRRc1UynWRY1FQHZyBdVQn7MnM0I_nAl2hIgPrrF33TRyaS8uytc9oBZIjL9WgkBl8Kzi4AR4MBv55-FxDL3tTUy8rO0_V0xXXFMYpUcGSlQ6xRO3VWA_C0HKgV75dI/s1600/4.jpg"
      tabindex="0"
      width="650"></amp-img>

Kamu bisa mengganti URL Image sesuai gambar yang kamu inginkan.

Menyisipkan Vidio Youtube 

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

Hapus Quick Edit

Sama seperti template terdahulu <b:include name='quickedit'/> sangat berpengaruh pada validnya sebuah template, begitu juga pada template AMP ini, jadi kamu harus menghapus kode tersebut setiap selesai menambahkan widget baru disidebar maupun di footer.

Edit CSS
Kalau kamu yang 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. Berasa kan ribetnya menggunakan AMP.

Semoga Bermanfaat.

Share this post

ROBY NASURO GUNAWAN

-English My name is roby nasuro gunawan, I come from a small town, I am not notable in the real world but I am famous in cyberspace:) -INDONESIAN Nama saya roby nasuro gunawan , saya berasal dari kota kecil , saya tidak terkenal di dunia nyata tetapi saya terkenal di dunia maya :)

Berlangganan update artikel terbaru via email: