Siniladom Free AMP Blogspot Template

Template ini dikembangkan dari template "Lonjurnal", versi Eksperimental template Blogger AMP sebelumnya.

Halaman Muka Sini Ladom Free AMP Blogger Template

Template Lonjunal sendiri memang sama sekali belum valid AMP. Sedangkan template ini seluruh halamannya sudah valid AMP. Untuk hasil validasi template ini dapat dilihat di AMP Validator.

Sebagian besar struktur AMP template ini diadopsi dari Template AMP hasil besutan Mas Adhy Suryadi di situs kompiajaib.com.

Bagi Anda yang masih baru dengan AMP dapat melihat ulasannya di artikel ini... Cara kerja AMP HTML

Demo

Donwload

Untuk nilai SEO template ini, menurut situs chkme.com tidak diragukan lagi. 100% SEO Friendly. Untuk melihat hasilnya silakan klik http://chkme.com/seo-siniladom.blogspot.co.id.

Panduan Kustomisasi

Ada beberapa komponen yang harus dirubah agar penggunaan template ini sesuai dengan yang diharapkan.

1. Logo

Untuk mengganti logo di bagian header blog sama seperti mengganti template blogger pada umumnya yaitu pada bagian layout template cari elemen Header kemudian klik edit lalu upload gambar logo. Lihat gambar berikut:

Mengganti Gambar Logo Blog

2. Mengganti kode Google Analytic

Buka Dashboard Blogger klik Template >> Edit HTML cari kode berikut lalu rubah kode UA-XXXXX-Y dengan kode Google Analytic 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>

3. Bagian Iklan

Ada tiga slot iklan disediakan dalam template ini silakan merubah ke tiga-tiganya sesuai dengan kode iklan Anda. Untuk iklan Adsense ikuti langkah-langkah berikut:

A. Iklan Header

Masih di dalam editor template blogger cari kode berikut  kemudian lihat kode di bawahnya sebagai berikut:

<amp-img alt='Header Ads' height='90' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-jDIQjDzjlMuHN0vALxj9qmc3TWdUJdifFDpdDaZe8NqM7KC3N8aU83wUiV5AxhWzIq7B_eT4nkjv85hyphenhyphenLuN35_dxH83htTOQ5n-aqZ4n28GGdi-un1LxV5r12K2Gn8lKiDd5FKssUjQ/s1600/banner728.gif' title='Header Ads' width='728'/>
<div class='clear'/>

ganti kode tersebut di atas dengan kode adsense Anda.

Catatan: Untuk menambahkan kode Adsense di Template Blogger AMP sedikit berbeda dengan template blogger biasa. Kode Adsensenya sebagai berikut:

<amp-ad data-ad-client='ca-pub-xxxx' data-ad-slot='xxxx' height='90' layout='responsive' type='adsense' width='728'>
 </amp-ad>

B. Iklan Dalam Artikel

Di editor template blogger cari kode berikut  kemudian lihat kode di bawahnya sebagai berikut:

<amp-img alt='Sidebar Ads' height='250' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_TNILLxt4N6X9S1Vms9ievIK5DSbyS4AqpUlwEgrMhH6vT4UHV4GKgBLC_VzMX6ISPNG7Glo5KULCLIvwYJImZo_WIcACmkR2MjyfFZKMZ9MCeLqKuY1qLhxGN0uet0b2zeSxJ_ql5A-/s1600/ads300.png' title='Sidebar Ads' width='300'/>

Ganti kode tersebut di atas dengan kode Adsense Anda. Caranya sebagai berikut:

<amp-ad data-ad-client='ca-pub-xxxx' data-ad-slot='xxxx' height='250' layout='responsive' type='adsense' width='250'>
           </amp-ad>

C. Iklan Bawah Artikel

Di editor template blogger cari kode berikut  kemudian lihat kode di bawahnya sebagai berikut:

<amp-img alt='Under Post Ads' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikHv-E1BqmIYq4lhjCQSeZB5KLuPfklM1K6PaLJLipM-fKj8V25TNAnios_h-MwlVgbWrjSlLhyphenhyphen9cFdSGF-NAP2WgiwZsrub3-a-crORZWZk6nffykP02h62v-UIUYSteAOgxjqvKvUffC/s1600/banner728.jpg' title='Under Post Ads' width='728'/>

Ganti kode tersebut di atas dengan kode Adsense Anda. Caranya sebagai berikut:

<amp-ad data-ad-client='ca-pub-xxxx' data-ad-slot='xxxx' height='250' layout='responsive' type='adsense' width='250'>
           </amp-ad>

Perhatikan kode xxxx, ganti dengan kode Adsense milik Anda.

3. Bagian Komentar Disqus

Di dalam editor template blogger cari kode ini <b:includable id='disqus-comments' var='post'> lihat keseluruhan kodenya. Ganti username Disqus Bangjonie dengan username Dsqus Anda. Sebagai berikut:

<div class='disqus-comments' id='disqus_comments'>
              <amp-iframe expr:src='&quot;https://cdn.rawgit.com/ikhwan15/ikhz/gh-pages/amp/disqus-comment.html?shortname=bangjonie&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>

4. Bagian Related Post

Di editor template blogger cari kode  kemudian lihat kode berikut ini:

<!-- random post -->
<div class='clear'/>
<div class='random-posts'>
<amp-iframe frameborder='0' height='370' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/ikhwan15/ikhz/gh-pages/amp/recomended-post.html?url=https://siniladom.blogspot.co.id/' width='600'>
<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
</amp-iframe>

</div>
<!-- random post end -->

Ganti alamat URL blog https://siniladom.blogspot.co.id/ dengan URL blog Anda.

Final Words

Template Free AMP Blogger template ini tentunya masih terlalu banyak kekurangannya. Oleh karena itu komentar berupa saran dan masukan sangat diharapkan.

Belum berminat? tak apa, bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!