Template Blog Valid Amp Html versi majalah

Template Blog AMP -Anda masih terobsesi dengan template AMP? kalau ya....berikut ini akan saya bagikan Template Amp yang bertema template blog gratis bertema berita.khususnya berita seputar sepak bola(Arsenal).

Sebelum lebih jauh membahas fitur apa saja yang ada pada template ini, mungkin ada baiknya Anda lihat dulu artikel Saya sebelumnya seputar tutorial blog AMP, silahkan baca disini.

Template AMP gratis ini merupakan karya kang Basri Matindas yang berjudul AMPNEWS,kemudian saya edit ulang untuk di sesuaikan dengan tema tentang Arsenal.yakni bagian logo header dan background template.

Namun,logo header dan background tersebut bisa juga Anda ganti sesuai keinginan. Nanti akan saya tunjukkan bagaimana cara menggantinya.

Perubahan lainnya juga di lakukan pada bagian konten. Pada template aslinya,konten terdiri dari tiga kolom.

Kolom posting
Sidebar kiri
Sidebar kanan

Pada template AmpNews-Arsenal ini hanya ada dua kolom yang terdiri dari kolom postingan dan sidebar kanan.

Selain itu,pada template blogger Amp HTML gratis ini terdapat fitur popularposts slider. Fitur ini menampilkan postingan populer pada blog Anda dengan slide otomatis.

Fitur Template Blogger AmpNews-Arsenal

Fitur-fitur menarik yang ditawarkan tema gratisan ini antara lain :

Valid Amp HTML
Komentar Facebook Valid Amp HTML
Responsive Design
Dua Kolom(kolom postingan dan sidebar)
SEO Friendly
Tiga Kolom Footer
PopularPosts Slider
FeaturedPosts
2 Slot Iklan

Demo Template

Pengaturan Pada Template AMP untuk Blogger

Agar tampilan Blog Anda nanti sesuai dengan demonya, lakukan beberapa pengaturan berikut ini :

✔ Untuk pengaturan navigasi bagian atas

silahkan Anda cari kode seperti di bawah ini :

<nav class='Navtop' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'><i class='material-icons'></i></span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'><i class='material-icons'></i></span></a></li>
<li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'><i class='material-icons'></i></span></a></li>
<li><a href='#' itemprop='url' target='_blank' title='Sitemap'><span itemprop='name'><i class='material-icons'></i></span></a></li>
<li><a class='Disclaimer' href='#' itemprop='url' title='Disclaimer'><span itemprop='name'><i class='material-icons'></i></span></a></li>
</ul>
</nav>

Ganti tanda pagar dengan URL tujuan.

✔ Menu Template Bagian Bawah

cari kode seperti di bawah ini dan edit sesuai kebutuhan.ganti tanda pagar (#) dengan URL tujuan.

<nav id='menu'>
<input type='checkbox'/>
<label><i class='material-icons'></i><span>MENU</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Jadwal</a></li>
<li><a class='sub' href='#'>Youtube</a>
<ul class='menus'>
<li><a href='#'>Liga Inggris</a></li>
<li><a href='#'>Liga Champions</a></li>
<li><a href='#'>FA Cup</a></li>
</ul>
</li>
<li><a href='#'>Klasemen</a></li>
<li><a class='sub' href='#'>Skor</a>
<ul class='menus'>
<li><a href='#'>Liga Inggris</a></li>
<li><a href='#'>Liga Champions</a></li>
<li><a href='#'>FA Cup</a></li>
</ul>
</li>
<li><a href='#'>Preview</a></li>
<li><a href='#'>Transfer</a></li>
<li><a href='#'>Piala Dunia</a></li>
<li><a href='#'>Sejarah</a></li>
</ul>
</nav>

✔ Pengaturan Meta Tag

Edit Meta tag yang terletak di atas kode <b:skin>

<b:if cond='data:blog.pageType == "item"'>
<meta content='https://www.facebook.com/ID-AKUN-FACEBOOK' property='article:author'/>
</b:if>
<link href='https://plus.google.com/ID-GOOGLE+' rel='me'/>
<link href='https://plus.google.com/ID-GOOGLE' rel='publisher'/>
<Meta content='KODE-VERIFIKASI-BING' name='msvalidate.01'/>
<meta content='KODE-VERIFIKASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<Meta content='KODEVERIFIKASI-YANDEX' name='yandex-verification'/>
<meta content='ID-PENGGUNA-FACEBOOK' property='fb:admins'/>
<meta content='FACEBOOK-APP-ID' property='fb:profile_id'/>
<meta content='NAMA ANDA' name='Author'/>
<meta content='https://www.facebook.com/URL-FACEBOOK' property='article:author'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@AKUN-TWITTER' name='twitter:creator'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>

✔ Pengaturan Komentar Facebook

Untuk pengaturan komentar facebook, Cari kode seperti di bawah ini,dan ganti ID kopralkoclok dengan nama app facebook Anda.

<div class='fb-comments' id='kopralkoclok'>
<amp-facebook-comments data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'>
</amp-facebook-comments>
</div>

✔ Mengganti Logo Header

Anda cari kode ini dan ganti Url Gambar yang bercetak merah dengan Url gambar yang Anda inginkan.

<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='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHUhoBXICdDj9FGsCQMoq9vHm_iT70CX2U4l0-0PvaSZY23Hh47IkJ7aQ6GMJnjSQkC_xcfll91G-VxiWid4YUvqbLNRKQGxG9RdJiM3z_cyzm7npE48uJGKYKkN60culVTHMNIBH07eMA/s1600/Arsenal.png' width='40'/> <data:title/></span></a>
</b:includable>

✔ Mengganti Background

Silahkan cari kode seperti ini dan ganti Url gambar berwarna merah tersebut dengan Url gambar Anda.

Gambar yang di pakai usahakan berukuran 1600x1600.

#navbar-iframe,.quickedit,.postsocial{height:0;visibility:hidden;display:none}
body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPxpDhxtDWvTzdnw1gKQ3iKpKZZPmsrkpdG5tQ6BmZnrz76_v6M_roqhsKWTM6x2QVCODDGmz_VlpB7adQ_8PeithrDByXZcMvOQcAzt30Hd1E3s_-edBryM4YqqV8tC1OFSW6WjtQIBvU/s1600/All+about+arsenal+football+club.jpg)

Background tersebut juga bisa menggunakan warna tertentu,jadi tidak harus berupa gambar.
Caranya ganti kode background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPxpDhxtDWvTzdnw1gKQ3iKpKZZPmsrkpdG5tQ6BmZnrz76_v6M_roqhsKWTM6x2QVCODDGmz_VlpB7adQ_8PeithrDByXZcMvOQcAzt30Hd1E3s_-edBryM4YqqV8tC1OFSW6WjtQIBvU/s1600/All+about+arsenal+football+club.jpg)
misal saya ingin menggantinya dengan background warna merah,maka kode yang di gunakan seperti ini background:#ff0000.
Untuk kode warna lainnya silahkan lihat di sini Kode Warna Html dan Cara Penggunaanya

✔ Halaman Kontak dan Disclaimer

Cari kode Url http://kopralkoclok.blogspot.com/p/contact.html ganti dengan halaman kontak Anda.

Lakukan hal yang sama untuk halaman disclaimer.

✔ Related Posts atau Artikel Terkait

Untuk kode artikel terkait ini saya pakai kode buatan Kang Adhy Suryadi kompiajaib.com,pengaturanya silahkan Anda ganti artasindo.com dengan Url blog Anda.

Tulisan berwarna merah boleh di ganti untuk di sesuaikan,yang lainnya jangan di otak-atik.

<b:if cond='data:post.labels'>
 <b:loop index='x' values='data:post.labels' var='label'>
   <b:if cond='data:x==0'>
<b>BERITA TERKAIT :</b>
<amp-iframe expr:src='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/relatedposts_light.html?url=www.artasindo.com&label=" + data:label.name' frameborder='1' height='300' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
</amp-iframe>
   </b:if>

Jangan lupa sob...setiap kali menambah gadget baru,secara otomatis akan muncul kode ini <b:include name='quickedit'/>,hapus kode tersebut agar blog Anda tidak mengalami error validasi AmpHTML.

Peringatan : di larang keras menghapus link kredit,jadilah Blogger yang tahu berterima kasih. Hargai kerja keras sang desinger template.bikin template tidak instan sobat

Demo
Download