Template Blog AMP - Template blogger AMP gratis ini layak untuk Anda mencobanya karena memiliki beberapa keunggulan yang akan dibahas pada artikel ini.Yes,Blog Costum AMP(Accelerated Mobile Pages) tampaknya semakin banyak peminatnya.salah satunya saya sendiri.
Sehingga saya pun ikut migrasi ke blog custom amp.namun,tidak serta merta Blog lama saya alihkan ke Versi AMP,karena terlalu banyak yang harus di edit ulang.baik itu template maupun konten di dalam blog.
Sudah jadi karakter mungkin,tidak suka ribet,inginya yang instan saja.jadi,untuk turut serta mencoba blog AMP saya pun terpaksa harus membuat Blog baru.
Untuk membuat blog valid AMP,elemen paling pokok yang harus di gunakan adalah Template.ini sangat penting,karena elemen pembentuk template blog biasa dan AMP memang berbeda.
Tapi jangan khawatir,sudah banyak Master yang sudah membagikan template valid AMP gratisan.sebut saja Kang Ismed,salah satu Guru Saya,meski beliaunya tidak mengakui saya sebagai muridnya 😀,yang jelas dari Master yang satu inilah saya banyak belajar seluk beluk dunia Blogging.
Template hasil karya Kang Ismed ini di beri nama AMP HTML.tampilanya simple namun SEO FRIENDLY.
Dasarnya saya bukan orang yang gampang puas,template karya beliau pun saya edit ulang sesuai selera saya.
Ada beberapa elemen yang saya ubah.seperti tampilan halaman utama atau homepage yang aslinya dua kolom,saya ubah menjadi tiga kolom seperti yang anda lihat di blog ini.
Selain itu,fitur komentar disqus juga saya ganti dengan komentar Facebook.
Jika sobat ingin yang versi asli,silahkan kunjungi blog Kang Ismed langsung,di Kang-Ismed.net.
Dan jika ingin template versi editan saya silahkan nanti download disini.
Berikut ini Fitur Template AMP HTML versi editan saya :
Fitur Template :
- 3 Columns on Homepage
- 1 Column on Page and Static Page
- Customize AMP Sidebar (Show/Hide)
- Share Button
- 4 Footer Columns
- Ready Slot Adsense (Parallax and Banner 728)
- Sticky header
- Email Subcribtion
- Valid Amp (test here)
- Facebook Comment Plugin
Tampilan Dekstop
Tampilan Mobile
Pengaturan :
1. Cari Kode seperti ini pada edit HTML.
Sesuaikan fitur yang ada di dalam amp-sidebar,di antara kode ini <amp-sidebar id='sidebar' layout='nodisplay' side='left'>
Sampai kode </amp-sidebar>
- Foto Profil : ganti kode gambar ini https://yt3.ggpht.com/-jgoyp7chROo/AAAAAAAAAAI/AAAAAAAAAAA/7T5JsLNv_zY/s900-c-k-no-mo-rj-c0xffffff/photo.jpg dengan URL foto sobat
- profil singkat,kontak email,twitter,facebook,youtube,google+,WA (sesuaikan)
2. Google Analytic
Cari dan Ganti Kode Google Analytic yang bercetak tebal.
<script type='application/json'> { "vars": { "account": "UA-XXXXXX-X" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script>
3. Logo Blog
Untuk mengganti Logo Blog,silahkan cari kode berikut,dan ganti dengan URL logo blog sobat
<amp-img alt='Logo' expr:title='data:title' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii2tmNE0n7WtqHoY6vjAfXoWf2OgWhjMONyTo6VD0zVbOCRywYoWN1OvEyBH2r3JDM_wHE6PkfV8MYUz6K4fEACstRzckmqm0YKP704ZacMymHivQS3aI2it0_NJTAYFEMW2MmmTgv9B0/s1600/Kutueblog.png' width='30'/>
6. Adsense
⚫ Untuk pengaturan slot iklan adsense Parallax (hasil kreasi Kang Adhy Suryadi).Saya sarankan pakai Adsense dengan ukuran banner 300x250,300x600 atau jenis banner vertikal lainya.
Selanjutnya cari dan edit kode seperti ini,serta sesuaikan dengan data ID adsense dan Slot Adsense Anda.
<amp-ad
layout="fixed-height"
height="250"
type="adsense"
data-ad-client="ca-pub-12345678910111213"
data-ad-slot="12323123">
</amp-ad>
- Sebagai Catatan :
- iklan adsense parallax tersebut tidak akan muncul pada tampilan dekstop.tapi hanya muncul pada tampilan Mobile saja.
⚫ Untuk iklan banner 728x90,cari dan edit kode di bawah ini sesuai dengan Id adsense dan data slot iklanya.
<amp-ad data-ad-client='ca-pub-12345678910111213' data-ad-slot='4419960023' height='90' layout='responsive' type='adsense' width='728'> </amp-ad>
5. Footer
- Logo Footer: silahkan klik add gadget dan pilih HTML/JavaScript.kemudian paste kode berikut di dalamnya.ganti Url foto yang bercetak tebal dengan Url Foto Logo Anda.
Edit juga keterangan singkatnya sesuai dengan topik blog.
<div id="logo-footer">
<a href="http://kutueblog.blogspot.com/" title="kutu blog"><amp-img alt="Logo Kutu Blog Footer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41abD84nR6qhAkmytza8ro-qDtQq-3No_WWfcOGUmQhc8kvR9xvBUzPLID30Bl_axNwG1NjzUhfao4Q8TDUyaRck5mZ34Jlq24itZECRKS19Co_OExeaOta02KHXYtrvtkGsgiCS4ODs/s320/Tips+blogging-min.png" height="50" title="kutu blog" width="347" /></amp-img></a>
</div>
<p>Contoh keterangan singkat : Berbagi Tips Dan Tutorial Seputar Blogger, AMP HTML, Adsense Dan SEO.</p> - Footer 2,3 dan 4 tambahkan Gadget sesuai dengan gadget yang ingin anda tambahkan.jangan lupa bahwa Setiap kali menambah gadget baru,hapus kode seperti ini <b:include name='quickedit'/> pada Edit HTML template blog agar tetap valid Amp.
Untuk demonya,Anda Lihat penampakan blog ini.
Oh ya, template blog amp gratisan ini ada bebapa perubahan terkait struktur data. Juga beberapa icon tidak dapat ditampilkan. Info selengkapnya seputar pembaruan tema AMP HTML freemium ini bisa Anda baca disini.
Kiranya masih ada yang perlu di tanyakan,silahkan kirim email atau tinggalkan komentar.....terima kasih atas kunjunganya,semoga bermanfaat.
Tambahkan Komentar