Infinit AMP Blogger Template Tutorial
Customize Theme
Navigation
Silakan buka Blogger > Template > "Edit HTML"
Cari dan ganti semua kode ini # dengan link Anda.
<nav id='menu-navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<label class='toggle' for='drop'><span class='fa-bars'>Menu</span></label>
<input id='drop' type='checkbox'/>
<ul class='menu'>
<li><a href='#'>Home</a></li>
<li>
<label class='toggle' for='drop-1'>Blogger</label>
<a href='#'>Blogger</a>
<input id='drop-1' type='checkbox'/>
<ul>
<li><a href='#'>Themes</a></li>
<li><a href='#'>Plugins</a></li>
<li><a href='#'>Tutorials</a></li>
</ul>
</li>
<li>
<label class='toggle' for='drop-2'>Web Design</label>
<a href='#'>Web Design</a>
<input id='drop-2' type='checkbox'/>
<ul>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Links</a></li>
<li>
<label class='toggle' for='drop-3'>Tutorials</label>
<a href='#'>Tutorials</a>
<input id='drop-3' type='checkbox'/>
<ul>
<li><a href='#'>HTML/CSS</a></li>
<li><a href='#'>jQuery</a></li>
<li><a href='#'>Other</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Graphic Design</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
</ul>
<button class='search_icon' on='tap:search_box'>
<svg viewBox='0 0 24 24'>
<path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='#ffffff'/>
</svg>
</button>
</nav>Footer Menu
Silakan buka Blogger > Template > "Edit HTML"
Cari dan ganti semua kode ini # dengan link Anda.
<div class='footer-column'>
<div class='footer-menu'>
<h3>Web Tools</h3>
<ul class='footer2 line'>
<li><a href='#' title='Contact Form'>Contact Form</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Daftar Isi Blog'>Sitemap</a></li>
<li><a href='#' title='Terms of Service'>Terms of Service</a></li>
</ul>
</div>
<div class='footer-menu'>
<h3>Blogger</h3>
<ul class='footer2 line'>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a href='#' title='Menu 3'>Menu 3</a></li>
<li><a href='#' title='Menu 4'>Menu 4</a></li>
<li><a href='#' title='Menu 5'>Menu 5</a></li>
</ul>
</div>
<div class='footer-menu'>
<h3>About</h3>
<p class='footer2'>
Google today announced IT admins can now apply policies to Chrome on Android and iOS.
<div class='clear'/>
<div class='infinimed'>
<a class='facebook' href='#' rel='nofollow' target='_blank'/>
<a class='twitter' href='#' rel='nofollow' target='_blank'/>
<a class='googleplus' href='#' rel='nofollow' target='_blank'/>
<a class='rssfeed' href='#' rel='nofollow' target='_blank'/>
</div>
</p>
</div>
</div>SEO Meta Tag
Buka Blogger, Template, "Edit HTML"
Cari dan ganti semua tulisan xxxxx dengan keterangan blog Anda (Jika tidak diperlukan, hapus atau dibiarkan juga tidak apa-apa).
<meta content='ISI-DENGAN-DESKRIPSI-BLOG' name='keywords'/>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='https://plus.google.com/LINK-PROFIL-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/LINK-PROFIL-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/LINK-PROFIL-GOOGLE-PLUS' rel='me'/>
<meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='NAMA-PENULIS' name='Author'/>
<meta content='https://www.facebook.com/LINK-FAN-PAGE' property='article:author'/>
<meta content='https://www.facebook.com/LINK-PROFIL-FB' property='article:publisher'/>
<meta content='KODE-FB-APP' property='fb:app_id'/>
<meta content='KODE-PROFIL-ADMIN' property='fb:admins'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>SEO Meta Tag
Buka Blogger, Template, "Edit HTML"
Cari tulisan UA-XXXXXX-Y dan ganti dengan kode Google Analystic blog Anda.
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-XXXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>Subscribe Box
Buka Blogger, Template, "Edit HTML"
Ganti kode Infiniteidn di dalam HTML ini dengan user name feedburner blog Anda
<div id='subscribeBOX'>
<div class='emailCol'>
<form action='https://feedburner.google.com/fb/a/mailverify?' method='get' novalidate='' target='_blank'>
<input name='email' placeholder='Your Email' required='required' type='email'/>
<input name='uri' type='hidden' value='Infiniteidn'/>
<input class='Submitter' type='submit' value='Subscribe'/>
</form>
</div>
</div>Komentar Disqus
Buka Blogger, Template, "Edit HTML"
Ganti infinite-1 dengan user name Disqus blog Anda
<div class='disqus-comments' id='disqus_comments'>
<amp-iframe expr:src='"https://cdn.rawgit.com/Arlina-Design/redvision/c265155f/disqus_amp.html?shortname=infinite-1&url=" + 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>Shortcodes
Drop Caps
<span class="first-letter">Your First Letter here</span>Your First Letter here Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.
Button
<div>
<ul class="ripplelink button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>Membagi konten post menjadi dua kolom
<div class="bagidua">
--- TAMBAHKAN KONTEN DISINI ---
</div>Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.
Membagi konten post menjadi tiga kolom
<div class="bagitiga">
--- TAMBAHKAN KONTEN DISINI ---
</div>Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.
Membagi konten post menjadi empat kolom
<div class="bagiempat">
--- TAMBAHKAN KONTEN DISINI ---
</div>Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.
Membuat tabel di postingan
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</tbody>
</table>| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
Setelan Lain
Disqus
Jika akan menggunakan versi komentar dengan Disqus dan komentar disqus tidak muncul di postingan. Hapus terlebih dahulu komentar yang ada di postingan atau backup terlebih dahulu ke Disqus di pengaturan Disqus.
Gambar di Postingan
Untuk mengurangi error AMP, silakan edit gambar pada postingan secara manual seperti contoh gambar di bawah ini
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s1600/How+to+pack+without+wrinkles.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="How to pack without wrinkles" style="border: none;" data-original-height="683" data-original-width="1024" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s640/How+to+pack+without+wrinkles.jpg" title="How to pack without wrinkles" width="640" /></a></div>Hapus semua tag style dan ganti img dengan amp-img
<div class="separator">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s1600/How+to+pack+without+wrinkles.jpg"><amp-img alt="How to pack without wrinkles" data-original-height="683" data-original-width="1024" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s640/How+to+pack+without+wrinkles.jpg" title="How to pack without wrinkles" width="640" /></a></div>Atau Tambahkan <noscript> sebelum tag img dan </noscript> setelah tag penutup img
<div class="separator">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s1600/How+to+pack+without+wrinkles.jpg"><noscript><img alt="How to pack without wrinkles" data-original-height="683" data-original-width="1024" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s640/How+to+pack+without+wrinkles.jpg" title="How to pack without wrinkles" width="640" /></noscript></a></div>Nonaktifkan tampilan khusus mobile
Nonaktifkan versi mobile pada template ini, silakan klik Template > Tombol Gear > Pilih Tidak.
