Installation
- Ekstrak hasil download template Minima Lite AMP
- Buka file Minima Lite AMP.txt via notepad, copy semua isi file
- Buka Blogger, masuk ke Tema > Edit HTML
- Hapus semua kode yang ada, paste kan isi file notepad
- Klik Simpan
Customize
- Buka Blogger, masuk ke Tema > Edit HTML
- Cari dan ganti semua tulisan berwarna merah dengan keterangan blog anda (sebagian kode mungkin tidak diperlukan, abaikan jika tidak perlu)
# Meta Tag
<meta content='WARNA_ADDRESS_BAR' name='msapplication-navbutton-color'/>
<meta content='WARNA_ADDRESS_BAR' name='apple-mobile-web-app-status-bar-style'/>
<meta content='WARNA_ADDRESS_BAR' name='theme-color'/>
<b:if cond='data:view.isMultipleItems'>
<meta content='KATA_KUNCI_BLOG' name='keywords'/>
<b:elseif cond='data:view.isSingleItem'/>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<b:if cond='data:view.isPost'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='KODE_VALIDASI_GOOGLE_WEBMASTER' name='google-site-verification'/>
<meta content='KODE_VALIDASI_BING_WEBMASTER' name='msvalidate.01'/>
<meta content='KODE_VERIFIKASI_ALEXA_ID' name='alexaVerifyID'/>
<meta content='NAMA_PENULIS' name='Author'/>
<b:if cond='data:view.isHomepage'>
<b:if cond='data:view.isSingleItem'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
</b:if></b:if>
<b:if cond='data:view.isPost'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-idFZsl4r8cE/Xq0fOAde-fI/AAAAAAAAC9M/YGanJDEl684I4luLdjJbdzazQUVaQ63WACEwYBhgL/s240/blogger_icon.png' property='og:image'/>
</b:if></b:if>
<b:if cond='data:view.isMultipleItems'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:elseif cond='data:view.isSingleItem'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:view.isSingleItem'>
<meta content='https://www.facebook.com/LINK_FAN_PAGE' property='article:author'/>
<meta content='https://www.facebook.com/LINK_PROFIL_FB' property='article:publisher'/>
</b:if>
<meta content='FB_APP_ID' property='fb:app_id'/>
<meta content='FB_ADMIN_ID' property='fb:admins'/>
<meta content='id' name='geo.country'/>
<meta content='id_ID' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='general' name='rating'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:image:alt'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:image:alt'/>
</b:if>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='USERNAME_TWITTER' name='twitter:creator'/>
<amp-analytics data-credentials='include' type='gtag'>
<script type='application/json'>
{
"vars" : {
"gtag_id": "UA-YYYYYYYY-Y",
"config" : {
"UA-YYYYYYYY-Y": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
<amp-iframe class='disqus-comments' expr:src='"https://rawcdn.githack.com/ArgaFairuz/Theme62/master/disqus_amp.html?shortname=DISQUSSHORTNAME&url=" + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
Keterangan :
- WARNA_ADDRESS_BAR adalah warna di bagian Status Bar pada perangkat mobile.
Ganti dengan kode warna Hex Color, contoh : #2196f7
- KATA_KUNCI_BLOG adalah kata kunci blog anda, pisahkan dengan tanda koma bila mempunyai kata kunci blog lebih dari satu.
Contoh : android, gadget
- KODE_VALIDASI_GOOGLE_WEBMASTER adalah kode validasi Google Webmaster atau Search Console.
Ganti dengan kode validasi milik akun anda jika punya
- KODE_VALIDASI_BING_WEBMASTER adalah kode validasi Bing Webmaster.
Ganti dengan kode validasi milik akun anda jika punya
- KODE_VERIFIKASI_ALEXA_ID adalah kode validasi ID Alexa.
Ganti dengan kode validasi milik akun anda jika punya
- NAMA_PENULIS adalah nama penulisnya.
Ganti dengan nama si penulisnya, nama anda sendiri misalkan
- ../s240/blogger_icon.png adalah logo blog.
Ganti dengan url logo blog anda
- LINK_FAN_PAGE adalah link akun FanPage Facebook blog anda.
Ganti jika anda mempunyainya
- LINK_PROFIL_FB adalah link akun Facebook pribadi anda.
Ganti dengan milik anda jika punya
- FB_APP_ID dan FB_ADMIN_ID, silahkan ganti dengan milik anda jika punya
- id, id_ID, en_US, Indonesia adalah kode negara.
Abaikan saja jika anda bertempat tinggal di Indonesia
- USERNAME_TWITTER adalah akun Twitter anda.
Ganti dengan akun milik anda jika punya
- UA-YYYYYYYY-Y adalah kode pelacakan Google Analytics.
Ganti dengan kode milik anda jika punya
- DISQUSSHORTNAME adalah kode komentar disqus.
Ganti dengan kode shortname disqus milik anda
# Template color
:root {--color1: #2196f7; --color2: #1e88e5}
<amp-iframe expr:src='"https://rawcdn.githack.com/ArgaFairuz/Theme62/master/relatedpost_amp.html?color=2196f7&url=" + data:blog.homepageUrl' frameborder='0' height='320' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' style='height:320px' width='600'>
Warna template secara default adalah biru, ganti dengan kode warna dibawah ini jika ingin mengganti warna template
Kode 2196f7 adalah Color 1
Kode 1e88e5 adalah Color 2
Color 1
Color 2
f44336
e53935
e91e63
d81b60
9c27b0
8e24aa
673ab7
5e35b1
3f51b5
3949ab
2196f3
1e88e5
03a9f4
039be5
00bcd4
00acc1
009688
00897b
4caf50
43a047
8bc34a
7cb342
cddc39
c0ca33
ffeb3b
fdd835
ffc107
ffb300
ff9800
fb8c00
ff5722
f4511e
795548
6d4c41
9e9e9e
757575
607d8b
546e7a
# Navigation
<nav itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation' toolbar='(min-width: 768px)' toolbar-target='target-element-left'>
<ul class='menu'>
<li>
<input type='checkbox'/>
<a itemprop='url'><span itemprop='name'>Menu 1</span></a>
<div><ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 4</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 5</span></a></li>
</ul></div>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
<li>
<input type='checkbox'/>
<a itemprop='url'><span itemprop='name'>Menu 4</span></a>
<div><ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 3</span></a></li>
<li>
<input type='checkbox'/>
<a itemprop='url'><span itemprop='name'>Sub Menu 4</span></a>
<div><ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 4.1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 4.2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 4.3</span></a></li>
</ul></div>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 5</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 6</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 7</span></a></li>
</ul></div>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 5</span></a></li>
</ul>
</nav>
Keterangan :
- Tanda # adalah destinasi link/url menu yang dituju.
Ganti dengan link/url menu blog anda masing-masing
- Menu 1, Sub Menu 1, Sub Menu 4.1. Silahkan ganti dengan nama menu dan bagian dari menu blog anda
- Silakan untuk menyesuaikan tampilan menu blog anda, tiap menu berawalan kode <li> dan berakhiran kode </li>
# Footer Menu
<div class='footer-a'>
<div class='footer-menu'>
<h3>About Us</h3>
<div>
Google found that 74% of people say that when a site is mobile-friendly, they’re more likely to return to that site in the future
</div>
<div class='soc'>
<a href='#' title='Follow Our Facebook'>
<svg aria-hidden='true' data-icon='facebook-f' data-prefix='fab' focusable='false' role='img' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'><path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z' fill='currentColor'/></svg>
</a>
<a href='#' title='Follow Our Twitter'>
<svg aria-hidden='true' data-icon='twitter' data-prefix='fab' focusable='false' role='img' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z' fill='currentColor'/></svg>
</a>
<a href='#' title='Follow Our Instagram'>
<svg aria-hidden='true' data-icon='instagram' data-prefix='fab' focusable='false' role='img' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><path d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z' fill='currentColor'/></svg>
</a>
<a href='#' title='Subscribe to Our RSS'>
<svg aria-hidden='true' data-icon='rss' data-prefix='fas' focusable='false' role='img' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><path d='M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z' fill='currentColor'/></svg>
</a>
</div>
</div>
<div class='footer-menu d'>
<h3>Our Site</h3>
<div>
<a href='#'>About Us</a>
<a href='#'>Contact Us</a>
<a href='#'>Disclaimer</a>
<a href='#'>Terms of Service</a>
<a href='#'>Privacy Policy</a>
<a href='#'>Sitemap</a>
</div>
</div>
<div class='footer-menu'>
<h3>Newsletter</h3>
<div class='subs'>
Subscribe to the latest articles from this blog directly via email
<form action='https://feedburner.google.com/fb/a/mailverify?' method='get' novalidate='' target='_blank'>
<input autocomplete='off' name='email' placeholder='Your Email' required='required' type='email'/>
<input name='uri' type='hidden' value='ID_FEEDBURNER'/>
</form>
Click enter to subscribe
</div>
</div>
</div>
Keterangan :
- Google found that 74% of people say.... Ganti dengan keterangan tentang isi blog anda
- ID_FEEDBURNER adalah ID pada akun Feedburner blog anda agar pembaca yang berlangganan akan mendapatkan pesan email bila blog anda memiliki artikel baru.
Ganti dengan ID Feedburner blog anda jika punya
Panduan Penggunaan Template
# Valid AMP
Agar blog menjadi valid AMP kita harus melakukan sedikit perubahan pada kode HTML postingan seperti merubah kode <img> menjadi <amp-img> dan lainnya, tentu itu akan membutuhkan waktu lama jika mengeditnya secara manual dan memiliki banyak postingan.
Nah, saya mencoba membuat AMP Convert untuk memudahkan pekerjaan kalian dalam mengatur HTML postingan.
AMP Convert ini merupakan alat konversi postingan biasa menjadi valid AMP
Baca selengkapnya...
# Hasil Penelusuran Google
Url dibawah ini adalah tampilan logo persegi panjang pada hasil penelusuran seperti contoh diatas. Logo secara default menggunakan logo blogger, jika ingin mengubahnya silahkan ganti url dibawah ini dengan logo blog kamu, disarankan menggunakan logo persegi panjang dengan ukuran 600x60 piksel, logo harus dalam format .jpg, .png, atau .gif
<meta content='https://1.bp.blogspot.com/-Pu1iDBvpN7k/XWlZi-QQ_BI/AAAAAAAACmE/zYG_TL4UbkYzDQSOKJahrNlW4KAplqVdQCLcBGAs/s60/logo_blog.jpg' itemprop='url'/>
Thumbnail atau gambar pertama pada konten disarankan menggunakan gambar dengan lebar setidaknya 1200 piksel dalam format .jpg, .png, atau .gif
Ini bertujuan untuk mencegah adanya peringatan "Ukuran gambar lebih kecil dari ukuran yang direkomendasikan" pada AMP Search Console. Jika muncul peringatan ini diabaikan saja juga tidak masalah sebenarnya, hanya saja mungkin tampilan hasil penelusuran google akan tampak tampilan pada umumnya yang tidak seperti gambar diatas.
# Kode Pemasangan Iklan AdSense AMP
Kami merekomendasikan mengganti kode pemasangan iklan AdSense AMP dengan kode dibawah ini, ini bertujuan agar iklan tampil lebih baik di semua perangkat tanpa merusak tampilan template.
Iklan bentuk persegi (cocok dipasang didalam postingan ataupun sidebar)
<amp-ad
layout="fixed-height"
height=320
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
</amp-ad>
Iklan bentuk horizontal (cocok dipasang di header, footer, atas postingan ataupun bawah postingan)
<amp-ad
layout="fixed-height"
height=90
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
</amp-ad>
Kamu bisa mendapatkan kode data-ad-client dan data-ad-slot di AdSense > Iklan > Unit Iklan, lalu buat iklan AdSense seperti biasa, dan dapatkan kodenya
# Table
Jika terlalu banyak kolom atau kalimat didalam tabel terlalu banyak, biasanya tampilan tabel akan menabrak melebihi batas layar, solusinya tambahkan kode <div class="scroll">...</div> seperti dibawah ini
<div class="scroll">
<table>
<tr>
<th>Header Tabel 1</th>
<th>Header Tabel 2</th>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
</tr>
</table>
</div>
# Widget/Gadget
Kami sengaja mengunci widget/gadget Popular Posts di pengaturan Tata Letak untuk menghindari halaman AMP menjadi tidak valid.
Pengaturan widget/gadget Popular Posts pada "tampilkan cuplikan" kami sengaja nonaktifkan untuk menjaga tampilan template.
Pengaturan widget/gadget Archive hanya tersedia pada gaya Flat dan Dropdown, jika kamu menghapus widget/gadget ini lalu memasangnya kembali, maka pengaturan widget/gadget Archive hanya tersedia pada gaya Dropdown
Jika kamu telah menambahkan widget/gadget, selanjutnya pergi ke Tema > Edit HTML dan hapus kode dibawah ini untuk mencegah halaman AMP menjadi tidak valid.
<b:include name='quickedit'/>
# Struktur Data
Untuk menjaga struktur data agar tidak error, selalu setting Format Timestamp pada format tanggal dd/mm/yyyy atau seperti contoh 25/10/2020
Dimana saya dapat men-setting-nya?
Pergi ke Setelan > Bahasa dan pemformatan > Format Timestamp