Template Blog Valid Amp Html versi majalah

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

Template 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 bagaiman cara menggantinya.

Perubahan lainnya juga di lakukan pada bagian konten.pada template aslinya,konten terdiri dari tiga kolom.kolom posting,sidebar kiri dan sidebar kanan.
Pada template AmpNews-Arsenal ini hanya ada dua kolom yang terdiri dari kolom postingan dan sidebar kanan.

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

Fitur Template AmpNews-Arsenal
  • 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 Slort Iklan
Demo Template

PENGATURAN :

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'>&#59516;</i></span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'><i class='material-icons'>&#57552;</i></span></a></li>
<li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'><i class='material-icons'>&#58334;</i></span></a></li>
<li><a href='#' itemprop='url' target='_blank' title='Sitemap'><span itemprop='name'><i class='material-icons'>&#59507;</i></span></a></li>
<li><a class='Disclaimer' href='#' itemprop='url' title='Disclaimer'><span itemprop='name'><i class='material-icons'>&#59505;</i></span></a></li>
</ul>
</nav>
Ganti tanda pagar dengan URL tujuan.

Menu 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'>&#59632;</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>

Meta Tag

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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

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://4.bp.blogspot.com/-zYlzLSPdCLI/WXqHSBeT8aI/AAAAAAAAGgY/2jX6Edlu6OUIeYMejzekrFHda-vM5EP0gCLcBGAs/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://3.bp.blogspot.com/-umju3-edzH4/WXqEp782mZI/AAAAAAAAGgI/SfL_x8pEhO8all5EGCzzPoV9bT_heKG-wCLcBGAs/s1600/All%2Babout%2Barsenal%2Bfootball%2Bclub.jpg)
Background tersebut juga bisa menggunakan warna tertentu,jadi tidak harus berupa gambar.
Caranya ganti kode background:url(https://3.bp.blogspot.com/-umju3-edzH4/WXqEp782mZI/AAAAAAAAGgI/SfL_x8pEhO8all5EGCzzPoV9bT_heKG-wCLcBGAs/s1600/All%2Babout%2Barsenal%2Bfootball%2Bclub.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

Disclaimer

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

Related Posts atau Artikel Terkait

Untuk kode artikel terkait ini saya pakai kode buatan Kang Adhy Suryadi kompiajaib.com,pengaturanya silahkan Anda ganti kopralkoclok.blogspot.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'>
&#160;<b:loop index='x' values='data:post.labels' var='label'>
&#160; &#160;<b:if cond='data:x==0'>
<b>BERITA TERKAIT :</b>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/relatedposts_light.html?url=www.kopralkoclok.blogspot.com&amp;label=&quot; + data:label.name' frameborder='1' height='300' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
</amp-iframe>
&#160; &#160;</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

0 Response to "Template Blog Valid Amp Html versi majalah"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel