Dokumentasi FaceGoo AMP Blogger Template
FaceGoo AMP merupakan Blogger Template yang terinsipirasi dari Google, Facebook, dan Website Berita. Dibuat secara Custom untuk salah seorang Blogger yang ingin menggabungkan tampilan ala Google, Facebook, dan Website Berita lainnya. Template ini cocok digunakan untuk Blog berniche Berita.
Salah satu kelebihan dari Template FaceGoo AMP adalah menukung Accelerated Mobile Page (AMP), Struktur Data Schema.org, dan tampilan yang Modern.
Dokumentasi ini dibuat untuk membantu pengguna Template FaceGoo AMP dalam proses Instalasi.
Instalasi
- Masuk ke Blogger
- Pada halaman Dashboard, pilih menu "Tema (Theme)".
- Pastikan anda sudah mem-Backup template yang sedang anda gunakan. Pada halaman yang sama, klik "Backup/Pulihkan".
- Kemudian klik "Download Tema".
Terdapat dua cara untuk menginstal Blogger, pertama dengan mencari lokasi file XML dan meng-uploadnya, kedua dengan menyalin semua kode XML kedalam Editor Blogger. Untuk mengetahui cara instal Blogger secara lengkap, anda dapat melihat Cara Install/Pasang Blogger Template.
Mengatur Template.
Header
Klik menu "Tata Letak (Layout)", pada bagian Header, klik edit dan masukkan nama Blog anda.Navigasi
Terdapat dua bagian Menu Navigasi, Left Sidebar Menu dan Context Menu yang sangat mudah untuk di edit karena menggunakan Daftar Link. Untuk mengetahui cara mengedit Daftar Link, silahkan baca Cara Edit Widget Daftar Link di Blogger.Untuk menggunakan Icon disamping nama menu, anda dapat menggunakan Add-Ons Material Icons pada Firefox dan Chrome.
 |
| Source: https://github.com/chteuchteu/MaterialDesignIcons-Picker |
Cari ikon yang anda inginkan dan salin kode SVG dari ikon tersebut, kemudian pastekan sebelum nama dari Daftar Link.
Label Cloud & Sidebar Label
Anda dapat memilih Label yang ingin ditampilkan pada Homepage (Label Cloud Slider) dan semua halaman (Sidebar Label).Catatan: Pastikan anda memilih pilahan Cloud (bukan daftar) dan juga agar tampilan tidak rusak, pastikan untuk tidak menampilkan jumlah label.
Carousel & Sidebar Trending
Anda dapat memilih Postingan populer yang ingin ditampilkan pada Homepage (Carousel Slider) dan semua halaman (Sidebar Label).Footer
Untuk mengedit Footer sangat mudah untuk karena menggunakan Daftar Link. Untuk mengetahui cara mengedit Daftar Link, silahkan baca Cara Edit Widget Daftar Link di Blogger.SEO Meta Tag
Pada Dashboard Blogger, klik menu Tema (Theme) > Edit HTML.Pada Editor HTML, tekan CTRL + F pada Keyboard dan cari kode berikut.
Catatan: Ubah teks diantara tanda petik. Contoh: <meta content='XXXXX-DESKRIPSI-BLOG' name='keywords'/>, ganti teks "XXXXX-DESKRIPSI-BLOG" dengan deskripsi blog.
Berikut adalah Meta Tag yang harus diubah (Ubah teks yang bergaris bawah/Underline):
Deskripsi Blog
<meta content='XXXXX-DESKRIPSI-BLOG' name='keywords'/>
Icon Blog
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
Catatan: Jika perlu dihapus saja, untuk penggunaan yang maksimal, gunakan icon yang berformat Base64, lihat Cara Membuat Icon dengan Format Base64.
Publisher
<link href='XXXXX-URL-GOOGLE-PLUS-ATAU-FACEBOOK' rel='publisher'/>
Anda dapat menggunakan URL Profil Google Plus / Facebook. Sebaiknya gunakan Facebook.
Author Profile
<link href='XXXXX-URL-GOOGLE-PLUS-ATAU-FACEBOOK' rel='author'/>
Anda dapat menggunakan URL Profil Google Plus / Facebook. Sebaiknya gunakan Facebook.
Author Link
<link href='XXXXX-URL-GOOGLE-PLUS-ATAU-FACEBOOK' rel='me'/>
Anda dapat menggunakan URL Profil Google Plus / Facebook. Sebaiknya gunakan Facebook.
Google Search Console
<meta content='XXXXX-URL-KODE-VALIDASI-GOOGLE-SEARCH-CONSOLE' name='google-site-verification'/>
Bing Webmaster
<meta content='XXXXX-KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
Nama Author
<meta content='XXXXX-NAMA-AUTHOR' name='Author'/>
Facebook Profile
<meta content='XXXXX-URL-FACEBOOK' property='article:author'/>
Facebook Page
<meta content='XXXXX-URL-FACEBOOK-PAGE' property='article:publisher'/>
Facebook APP ID
<meta content='XXXXX-KODE-APLIKASI-FACEBOOK' property='fb:app_id'/>
Catatan: Jika tidak punya atau tidak menggunakannya, hapus saja. Jika anda belum memilki Facebook App ID, anda dapat melihat Cara Membuat Facebook App ID.
Facebook Admin ID
<meta content='XXXXX-KODE-ADMIN-FACEBOOK' property='fb:admins'/>
Catatan: Jika tidak punya atau tidak menggunakannya, hapus saja. Jika anda belum tahu cara melihat Facebook Admin ID, anda dapat melihat Cara Melihat kode Facebook Admin ID.
<meta content='XXXXX-URL-TWITTER' name='twitter:site'/>
Catatan: Jika anda tidak menggunakan Twitter, silahkan hapus saja.
Twitter Profile
<meta content='XXXXX-URL-TWITTER' name='twitter:creator'/>
Catatan: Jika anda tidak menggunakan Twitter, silahkan hapus saja.
Google Analytics
Cari kode UA-XXXXXX-Y dan ubah dengan kode Google Analitics anda, jika anda belum menggunakan Google Analytics. Silahkan baca Cara Memasang Google Anlytics.
Feedburner (Subscribe)
<input name='uri' type='hidden' value='XXXXX-USERNAME-FEEDBURNER'/>
Ganti teks XXXXX-USERNAME-FEEDBURNER dengan username Feedburner anda.
Komentar (Facebook/Disqus)
Terdapat dua Comment System, Facebook dan Disqus, anda hanya dapat menggunakan salah satunya.
Secara Default menggunakan komentar Facebook (tidak perlu diubah).
Jika anda ingin mengubah menjadi komentar Disqus, anda dapat mencari kode berikut:
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='facebook-comments'/>
Ubah teks facebook-comments menjadi disqus-comments.
Kemudian cari kode berikut:
<amp-iframe expr:src='"https://raw.githack.com/elhakimyasya/AMP-Projects/master/disqus-amp.html?shortname=template-disqussions&url=" + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups allow-forms' width='600'>
Ubah teks template-disqussions dengan username Disqus anda.
Lain-Lain
Mengubah Gambar dan Info Author di Context Menu
Terdat dua gambar Author dan Informasi Author seperti Nama dan Email yang ada di Context Menu.Untuk gambar Author pertama, cari URL berikut:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhThcmLZd5hAB3lLDcKSlJn4_9RxG-va1SiIfHwxhPsG_Z1RZsK5xgG4tysY3GXMWU-enGrcScqafK4qjI1v7MGZvHqK_939Y_DesDIjMERvcxVw-rioYhClBwspNydBPSQmy44fYCuO3U/s1600/elc-photo-2.jpg
Ubah dengan URL gambar anda.
Catatan: Pastikan gambar yang anda gunakan berukuran 32px x 32px. Jika tidak, maka tampilannya akan berantakan.
Untuk gambar Author kedua, cari URL berikut:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNUgC9nYrBXJNE7j7c6jg-jQAoT5h5E0xD7UrJwVMKcQrpMzao2yzzZKepfJOAJOI4_61A46UqiPMAuOVWJcMvJH1PXiM2WtAYud0xMlsCjeRLF_l3BeOOamVSJSYb7Smrb0Z8lVXW1zc/s1600/elc-photo-1.jpg
Ubah dengan URL gambar anda.
Catatan: Pastikan gambar yang anda gunakan berukuran 96px x 96px. Jika tidak, maka tampilannya akan berantakan.
Untuk mengganti nama Author, cari kode berikut:
<div class='name'>Yasya El Hakim</div>
Ubah teks "Yasya El Hakim" dengan nama anda.
Untuk mengganti Email Author, cari kode berikut:
<div class='mail'>yasyaelhakim@gmail.com</div>
Ubah teks "yasyaelhakim@gmail.com" dengan Email anda.
Teks Read More (Homepage)
Cari teks "Read More..." dan ubah dengan teks anda. Contoh: Baca Selengkapnya, dsb.
Teks Lihat Selengkapnya dan Ciutkan
Cari teks "Lihat selengkapnya..." dan ubah dengan teks anda.
Cari teks "Ciutkan" dan ubah dengan teks anda.
Mengubah Logo AMP pada Thumbnail
Cari URL berikut:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6713IRF32tHoZQ-icILhyBxQW5f1_8u5juyhye2ERBINksgSo4g20N3hAmDqE4TgkqHIPuE3BunS8AUqyjHZ5Fft9UCL-FXUSc7_l8GL1wpu0XuRvj6mZyWXQ-a-wKyZEseqyIHYClI/s1600/elc-amp-icon.png
Ubah dengan URL gambar anda.
Catatan: Pastikan gambar yang anda gunakan berukuran 128px x 128px. Jika tidak, maka tampilannya akan berantakan.
Shortcode
Anda dapt melihat tampilan Shortcode disini.Tombol
Tombol dengan Tag A<a class="button">Tombol</a>
Tombol Normal
<button>Tombol</button>
Table Of Content (TOS)
Untuk membuat JumpLink Table Of Content, anda harus mengedit postingan malui HTML (Samping Compose). Kode untuk menampilkan TOS adalah seperti berikut:<div class="anchor">
<a href="#anchor_1">Link 1</a>
</div>
Kemudian, untuk membuat JumpLink tujuan, anda dapat memasukkan kode berikut:
<h2 id="anchor_1">Link 1 Tujuan</h2>
Untuk membuat JumpLink TOS kembali ke atas, anda dapat menggunakan kode berikut:
<span id="anchor">Kembali Ke Table of Content</span>
Tambahan
Instalasi Post Template
Post Template yang sudah kami buat dapat digunakan untuk membuat tombol Show More / Show Less pada artikel.- Untuk menginstallnya, anda dapat mengeklik menu "Setelan (Settings)" > "Postingan, Komentar, dan Berbagi" kemudian edit pilihan "Tampilan Entri".
- Buka dan salin semua kode yang ada pada file "post-template.txt".
- Pastekan kedam "Tampilan Entri" dan klik tombol "Simpan Template".
Memastikan AMP Valid
Jika anda tidak menambahkan Widget baru, secara Default, template akan tetap valid. Tetapi jika anda telah menambahkan Widget baru, maka AMP akan menjadi Invalid. Untuk mengatasinya, lakukanlah cara berikut:Klik "Tema" dan klik "Edit HTML", cari kode berikut:
<b:includable id='postQuickEdit' var='post'>
Lebih lengkapnya, anda dapat melihat kode diatas seperti berikut:
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
Hapus semua kode diatas, kemudian cari dan hapus semua kode berikut :
<b:include name='quickedit'/>
Kemudian Cek Validasi AMP melalaui AMP Validator.
Catatan: Jika anda ragu dalam mengeditnya, silahkan hubungi pembuat template.
Perhatian
Untuk menjaga agar AMP tetap valid, pastikan anda sudah menonaktifkan Tampilan Mobile.