Cara Posting Artikel

Cara Posting Artikel Silahkan Tonton Video Berikut

PENTING

Setiap akan masuk ke menu Layout (Tata Letak) disarankan untuk reload halaman dulu karena terkadang Blogger tidak me-reload dirinya sendiri. Ditakutkan pengaturan sebelumnya jadi kembali ke awal jika tidak di-reload.

Format penulisan AMP pun berbeda dengan HTML biasa. Pastikan ikuti sesuai dengan yang ada di website AMP. Misalnya amp-img, amp-ad dan lain sebagainya.

Dalam postingan (bisa di awal atau akhir) harus menyertakan <noscript> yang isinya tag HTML <img> agar thumbnail bisa terbaca di homepage. Contoh artikel sudah dimasukkan ke dalam file ZIP.

Instalasi

Disarankan menginstall dengan cara copy paste kode templatenya langsung ke dalam editor HTML. Ini akan menghasilkan tampilan yang langsung mirip dengan blog demo.

Jika pakai metode upload XML biasanya akan berbeda dan harus atur widget lagi karena bekas pengaturan dari template lama masih terbawa.

Ubah Warna

Ganti warna tema bisa langsung dilakukan melalui Blogger Theme Designer. Masuk ke Theme (Tema) > Customize (Kustomisasi) > Advanced (Lanjutan).

Saat preview tidak ikut berubah warnanya (kekurangan AMP). Namun begitu di-save warna dari blog asli akan langsung berubah.

Meta Tag

Terdapat di bawah <head>. Beberapa yang bisa diatur:

1. Kode Tracking Google Search Console & Bing Webmaster.
Tambahkan yang lain kalau ada.

<meta content='xxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxx' name='msvalidate.01'/>

2. Keyword Blog

<meta content='Keyword 1, keyword 2, keyword 3, keyword 4, keyword 5, etc' name='keywords'/>
<meta content='Keyword 1, keyword 2, keyword 3, keyword 4, keyword 5, etc' property='article:tag'/>

3. Media Sosial

<meta content='Your Name' name='author'/>
<meta content='Your Name' property='article:author'/>
<meta content='xxxxxx' property='fb:admins'/>
<meta content='https://www.facebook.com/xxxxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxxxx' property='article:publisher'/>
<meta content='@YOURusername' name='twitter:site'/>

4. Gambar / Thumbnail Blog
Gambar yang akan muncul saat URL homepage dibagikan di media sosial. Ganti link berikut dengan milik sendiri (ada 2 buah).

https://1.bp.blogspot.com/-R8jFp1dYgkQ/XlZHPujUqUI/AAAAAAAAAD0/Mu55gqK64lEsMsKQzbi2fqM2zODtaQxsgCPcBGAYYCw/s1600/silegan.png

Script AMP

Script ini sengaja tidak diaktifkan karena dalam blog demo yang saya buat tidak ada elemen bersangkutan yang dimasukkan. Aktifkan jika elemen tersebut ditambahkan (AMP Ad alias ADSENSE, Sticky Ad, Youtube, Google Analytic). Jika sudah dibutuhkan simpan Script di dalam tag < head >

<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<script async='async' custom-element='amp-sticky-ad' src='https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js'></script>
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script>
<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'></script>

Menambahkan CSS Lain

Simpan CSS lain di atas ]]> </b:skin>.
Ketentuan agar valid AMP:

  • Tidak boleh pakai !important.

    SALAH
    #element {color: #000 !important}
    BENAR
    #element {color: #000}
  • Tidak boleh pakai comment CSS sedikitpun.

    SALAH
    <!-- Kode Header -->
    #elemen {color: #000}
    BENAR
    #element {color: #000}

Menambahkan Javascript Lain

AMP tidak bisa pakai JS custom. Jadi setiap JS tambahan HANYA akan muncul di versi non AMP. Cari kode berikut:

<!-- START EXTERNAL SCRIPT -->

Tambahkan JS tepat di bawah tulisan tersebut.

Logo (Banner) Blog

Logo blog disembunyikan secara default. Jika ingin memunculkan, cari kode berikut:

<header class='hidden'>

Ubah menjadi begini:

<header>

Setelah muncul, pergi ke menu Layout (Tata Letak). Edit di bagian header dan upload gambar milikmu. Disarankan untuk memilik Instead of title and description (Selain judul dan keterangan) agar tampilannya sempurna.

Sebenarnya header (dan widget lain) bisa di on/off dengan mudah melalui Layout (Tata Letak) dengan mencentang bagian Visible. Namun khusus untuk header tidak disarankan untuk menghilangkannya melalui Layout. Di dalam kode HTML header terdapat dynamic header tag yang berkaitan dengan SEO. Jika dihilangkan melalui Layout maka dynamic tag tersebut akan ikut hilang.

Maka cara yang aman adalah dengan menambahkan class CSS seperti di atas karena hanya akan menyembunyikan, bukan menghapus.

Iklan

Beberapa iklan bisa ditambahkan dengan mudah melalui Layout (Tata Letak). Widget iklan diberi warna khusus yaitu merah. Namun untuk iklan di dalam postingan harus ditambahkan melalui edit HTML.

1. Iklan Bawah Judul

<div class='iklanAtas'>
  <!-- Kode iklan bawah judul -->
</div>

2. Iklan Tengah Artikel

Hanya muncul di versi non AMP.

<div class='iklanTengah'>
  <!-- Kode iklan tengah artikel -->
</div>

3. Iklan In-feed

Iklan di antara daftar postingan di homepage. Cari kode berikut:

<b:if cond='data:infeed == 2'>

Artinya iklan in-feed akan muncul setelah postingan ke dua. Angkanya bisa diubah sesuai keinginan. Lalu posisi kode iklannya disimpan di:

<div class='infeed'>
  <!-- Kode iklan InFeed -->
</div>

Related Post

Ukuran font (fontSize), warna font (color) dan ukuran gambar (imgSize) dari related post diubah melalui script berikut:

<amp-iframe expr:src='&quot;https://cdn.statically.io/gh/igniel/blogger/master/amp/relatedpost.html?fontSize=14px&color=e50a4a&imgSize=50&url=&quot; + data:blog.homepageUrl.canonical + &quot;&label=&quot; + data:label.name' frameborder='0' height='470' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
</amp-iframe>

Pastikan nilai height sesuai dengan panjang widget. Kalau di AMP nilai height harus didefinisikan. Tidak bisa otomatis.

Related Post Tips

Jika Related Post tidak tampil di kondisi blogger yang sudah custom domain "https://www.domainanda.com" maka ubah kode/script JIKA URL Domain tanpa WWW tidak perlu di rubah:

<amp-iframe expr:src='&quot;https://cdn.statically.io/gh/igniel/blogger/master/amp/relatedpost.html?fontSize=14px&amp;color=e50a4a&amp;imgSize=50&amp;url=&quot; + data:blog.homepageUrl.canonical + &quot;&amp;label=&quot; + data:label.name' frameborder='0' height='470' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'></amp-iframe>

Menjadi :

<amp-iframe expr:src='&quot;https://cdn.statically.io/gh/igniel/blogger/master/amp/relatedpost.html?fontSize=14px&amp;color=e50a4a&amp;imgSize=50&amp;url=https://WWW.ALAMATBLOG.COM&amp;label=&quot; + data:label.name' frameborder='0' height='470' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'></amp-iframe>

Perhatikan: WWW.ALAMATBLOG.COM ubah dengan alamat atau URL blog Anda.

Recent Post

Saat ini recent post baru bisa ditambahkan melalui edit HTML. Kalau dimasukkan melalui tambah widget di Layout akan error. Tambahkan kode berikut di sekitar area sidebar.

<b:widget id='HTML10' locked='false' title='Recent Post' type='HTML' visible='true'>
<b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
  <amp-iframe expr:src='&quot;https://cdn.statically.io/gh/igniel/blogger/master/amp/recent4style.html?style=1&num=4&imgSize=200&color=e50a4a&fontSize=14&url=&quot; + data:blog.homepageUrl' frameborder='0' height='200' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'>
    <amp-img height='488' layout='fixed-height' noloading='' placeholder='' src='https://1.bp.blogspot.com/-x1yVa6ztsWY/WyHFPLG0uLI/AAAAAAAAyIg/3C5Lb5EjGywOPzO_XSwK1XTu6VlBZE4SgCLcBGAs/s1600/back-iframe.png' width='auto'></amp-img>
    </amp-iframe>
  </div>
</b:includable>
</b:widget>

Ada 4 style yang bisa dipakai (style). Selain itu bisa mengubah jumlah post (num), ukuran gambar (imgSize), warna font (color), dan ukuran font (fontSize).

Setiap id harus unik. Maka jika HTML10 menyebabkan error, artinya kode itu sudah dipakai di widget lain. Tinggal ganti saja angkanya bebas. Misalnya HTML11, HTML404, dll.

Navigasi Bernomor

Hanya muncul di versi non AMP. Diatur di script berikut (cari di atas </body>):

var config = {
  navigasi: {
    jumlahTampilan: 4, //jumlahnya HARUS sama dengan jumlah artikel di homepage
    jumlahNomor: 3, //jumlah tombol navigasi
    nextTeks: 'Next',
    prevTeks: 'Prev',
  }
}

Perhatikan bahwa jumlahTampilan harus sama dengan jumlah artikel yang disetting untuk tampil di homepage.

Komentar Disqus

WAJIB mengganti value dari shortname menjadi milik sendiri. Bisa juga ganti warna font (fontColor).
<amp-iframe expr:src='&quot;https://cdn.statically.io/gh/igniel/blogger/master/amp/disqus.html?shortname=zw4eirn--0rsb4s--xnh&fontFamily=sans-serif&fontColor=e50a4a&url=&quot; + data:blog.homepageUrl.canonical' frameborder='0' height='300' layout='fixed-height' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups'></amp-iframe>