Template Siniladom Free AMP Blogspot

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

Template Siniladom Free AMP Blogspot 

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 <!-- adsense headerad --> kemudian lihat kode di bawahnya sebagai berikut:

<amp-img alt='Header Ads' height='90' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_RxSrM_mLfT5v35-VDIzxfseKwikGpvMl3wywSV-T5Ro6F8XUvKyHhjei_c9lPX-dn7oxduQ_W67Vw68av7Hh2ErhaVd2Xi5NNIGXiuU0Lc_NLsZQvYdjjb7LcxnUr8Knj-a6SDcv4pb9/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 <!-- adsense dalam artikel --> kemudian lihat kode di bawahnya sebagai berikut:

<amp-img alt='Sidebar Ads' height='250' layout='responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc9esIsCUE63Z6Ver9eC38a-4_GE5RFDAV1MdN86R_ZiPjUNxgDoOCprYnTRGC132upVifDUciKQiyGt6PZ3LkL8RYhfrs8Jw121z8ngnEYCLQs-tRfq4JGVzZROJNcptIrmyj1d4VWfLb/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 <!-- adsense bawah artikel --> kemudian lihat kode di bawahnya sebagai berikut:

<amp-img alt='Under Post Ads' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqPKKJYyQ1M2fH-ZpPrhyphenhyphenTGGIGRDF7hpgIAUCB1fnLR28IRWarG9t_tunob37_RfPAlmD4nyTGVZ7OOVyHfjIYeXPeuLiGzKd3XBzJHnT-PCebDlrk20pO2Uwm9VMP5QeUkKELVBLEHycj/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 <!-- random post --> 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. Jadi jika punya pertanyaan, kritik dan saran jangan sungkan silahkan Anda memberi masukan melalui kolom komentar di bawah.

sumber : www.seoblog.id/

Tweet

Share

Subscribe Untuk Mendapatkan UPDATE Artikel Terbaru!