3.1 Menulis Artikel yang Rapi: Daftar Isi, Tombol, Tabel, dan Peta Situs

Materi ini berbeda: kode ditulis langsung di editor artikel, bukan di Tata Letak. Anda akan membuat daftar isi, tombol, tabel, formulir kontak, dan halaman Peta Situs, lalu memilih sistem komentar.

Dalam Materi Ini

1. 1Kode di dalam artikel
2. 2Membuat tabel
3. 3Halaman Peta Situs
4. 4Sistem komentar

Kode di Dalam Artikel

Kode artikel ditulis saat Anda menulis postingan atau halaman. Ada satu aturan penting: sebagian besar harus ditebalkan.

Letakkan diSaat menulis di Postingan baru atau Halaman baru Blogger (bukan di Tata Letak)

Kode yang ditulis langsung di isi tulisan. {getToc} membuat daftar isi otomatis dari subjudul. {getButton} mengubah tautan menjadi tombol. $ads={1} dan $ads={2} menaruh iklan Post ADS 1 dan 2 tepat di titik itu. {contactForm} memasang formulir kontak. {leftSidebar}, {rightSidebar}, {fullWidth} mengatur sidebar kiri, kanan, atau tanpa sidebar untuk tulisan itu saja.

Gambar 2. Kode artikel harus ditebalkan, kecuali tombol yang dijadikan tautan.

Kode siap tempel

{getToc} $title={Daftar Isi}

{getButton} $text={Unduh Formulir} $icon={download} $color={#1057c8}

$ads={1}

$ads={2}

{contactForm}

{leftSidebar}   {rightSidebar}   {fullWidth}

Langkah

1. Semua kode kecuali getButton harus ditebalkan. Tulis kodenya, blok teksnya, lalu klik tombol B (Tebal). Di mode HTML bentuknya <b>{getToc} $title={Daftar Isi}</b>.
2. getButton: tulis kodenya, blok teksnya, lalu jadikan tautan (ikon rantai atau Ctrl+K) ke alamat tujuan. Ratakan paragraf ke tengah agar tombol di tengah.
3. getToc: gunakan format Heading (bukan sekadar teks tebal) untuk subjudul agar muncul di daftar isi.
4. contactForm: paling cocok di Halaman bernama Kontak.

Arti tiap bagian kode

Bagian	Artinya
$icon	cart, contact, download, gift, info, link, paypal, preview, share, whatsapp
$color	Warna tombol dalam kode hex, misalnya #1057c8.
$size={1}	Tombol lebih besar (nilai apa pun).
$info	Teks keterangan kecil di dalam tombol.
$title	Judul daftar isi. Bila kosong: Table of Contents.

Gambar 1. Daftar isi (tertutup) dan tombol. Ikon tampil di blog sungguhan.

Membuat Tabel

Editor Blogger tidak punya tombol tabel, tetapi cara HTML-nya mudah: salin, lalu ganti isinya.

Letakkan diSaat menulis Postingan baru atau Halaman baru: klik ikon pensil di toolbar lalu pilih Tampilan HTML

Editor Blogger tidak punya tombol tabel, jadi tabel dibuat dengan kode HTML. Template otomatis merapikan tabel: judul kolom berlatar biru tua, baris berselang-seling, dan tabel yang lebar bisa digeser ke samping di HP dengan petunjuk Geser.

Kode siap tempel

<table>
<tr><th>Instrumen</th><th>Risiko</th><th>Imbal hasil</th></tr>
<tr><td>Deposito</td><td>Rendah</td><td>4% - 5% per tahun</td></tr>
<tr><td>Saham</td><td>Tinggi</td><td>Tidak tetap</td></tr>
</table>

<table>
<tr><td><b>Paket</b></td><td><b>Harga</b></td></tr>
<tr><td>Dasar</td><td>Rp 50.000</td></tr>
<tr><td>Pro</td><td>Rp 150.000</td></tr>
</table>

Langkah

1. Buka Postingan baru. Klik ikon pensil di toolbar, lalu pilih Tampilan HTML.
2. Tempel salah satu kode di atas di tempat tabel akan muncul, lalu ganti isinya. Tambahkan baris dengan menyalin satu baris <tr>...</tr>.
3. Kembali ke Tampilan Tulis untuk memeriksa, lalu klik Publikasikan.
4. Jangan memakai <thead>. Pada template ini judul kolom dengan thead tampil pudar dan hampir tidak terbaca. Pakai salah satu dari dua cara di atas.

Arti tiap bagian kode

Bagian	Artinya
<tr>	Satu baris.
<th>	Sel judul. Bila semua sel di baris pertama memakai th, baris itu menjadi judul kolom berlatar biru tua.
<b> di baris pertama	Cara kedua: bila semua sel baris pertama berisi teks tebal, baris itu juga dikenali sebagai judul kolom.
<td>	Sel isi. Boleh berisi teks, tautan, atau gambar.
<th> di awal baris lain	Menjadi judul baris (latar biru muda).
Atribut lama	border, width, cellpadding, dan sejenisnya dihapus otomatis, jadi tidak perlu ditulis.

Gambar 3. Hasil di template: kedua cara menghasilkan judul kolom biru tua

CatatanTabel berisi satu gambar saja (satu sel) tidak diubah, karena dianggap tata letak gambar.

Halaman Peta Situs

Peta Situs memudahkan pembaca dan mesin pencari menemukan semua artikel Anda.

Letakkan diBlogger → Halaman → Halaman baru → ikon pensil → Tampilan HTML. Lalu tambahkan tautannya di Header Menu atau Footer Menu pada Tata Letak

Halaman untuk pembaca yang berisi semua artikel dikelompokkan per label, lengkap dengan tanggal. Halaman ini juga menambah tautan internal sehingga mesin pencari lebih mudah menemukan artikel lama. Daftar dimuat otomatis dari feed Blogger, jadi artikel baru langsung ikut tanpa Anda mengubah apa pun.

Gambar 5. Alur membuat Halaman Peta Situs dari Halaman baru sampai menu.

Kode siap tempel

<div id="peta-situs">Memuat daftar artikel...</div>
<script>
(function(){
  var box=document.getElementById('peta-situs'),step=150,max=1000,all=[],start=1;
  function esc(s){return String(s).replace(/[&<>"]/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]})}
  function load(){
    fetch('/feeds/posts/summary?alt=json&max-results='+step+'&start-index='+start)
      .then(function(r){return r.json()})
      .then(function(d){
        var e=(d.feed&&d.feed.entry)||[];all=all.concat(e);
        if(e.length===step&&all.length<max){start+=step;load()}else render();
      })
      .catch(function(){box.textContent='Daftar artikel tidak dapat dimuat. Muat ulang halaman ini.'});
  }
  function render(){
    if(!all.length){box.textContent='Belum ada artikel.';return}
    var g={},keys=[];
    all.forEach(function(e){
      var l=(e.link||[]).filter(function(x){return x.rel==='alternate'})[0];if(!l)return;
      var c=(e.category&&e.category[0]&&e.category[0].term)||'Tanpa label';
      if(!g[c]){g[c]=[];keys.push(c)}
      g[c].push({u:l.href,t:(e.title&&e.title.$t)||'(tanpa judul)',d:((e.published&&e.published.$t)||'').slice(0,10)});
    });
    keys.sort(function(a,b){return a.localeCompare(b)});
    var h='<p><b>'+all.length+' artikel</b> dalam '+keys.length+' kategori. <a href="/sitemap.xml">sitemap.xml</a></p>';
    keys.forEach(function(k){
      h+='<h3>'+esc(k)+' ('+g[k].length+')</h3><ul>';
      g[k].forEach(function(p){h+='<li><a href="'+esc(p.u)+'">'+esc(p.t)+'</a> <small>'+esc(p.d)+'</small></li>'});
      h+='</ul>';
    });
    box.innerHTML=h;
  }
  load();
})();
</script>

Langkah

1. Buka Halaman → Halaman baru. Isi judul, misalnya Peta Situs.
2. Klik ikon pensil di toolbar, pilih Tampilan HTML, hapus isinya, lalu tempel seluruh kode di atas. Jangan kembali ke Tampilan Tulis sebelum menyimpan, karena editor bisa merusak skrip.
3. Klik Publikasikan. Alamat halaman biasanya /p/peta-situs.html.
4. Tata Letak → Footer Menu (atau Header Menu) → Tambahkan Link: Nama Peta Situs, URL /p/peta-situs.html.
5. Untuk Google: Blogger sudah membuat sitemap otomatis di alamatblog/sitemap.xml (artikel) dan alamatblog/sitemap-pages.xml (halaman). Kirim alamat itu di Search Console → Sitemap. Halaman Peta Situs di atas untuk pembaca, bukan pengganti sitemap.xml.

Arti tiap bagian kode

Bagian	Artinya
step=150	Jumlah artikel yang diminta sekali ambil.
max=1000	Batas jumlah artikel yang ditampilkan. Naikkan bila artikel Anda lebih dari 1000.
Pengelompokan	Memakai label pertama tiap artikel. Artikel tanpa label masuk ke Tanpa label.

Gambar 4. Hasil: artikel dikelompokkan per label (contoh data uji)

CatatanSatu artikel dengan beberapa label hanya muncul di label pertamanya. Judul kelompok mengikuti nama label persis.

Sistem Komentar

Pilih sistem komentar yang cocok untuk pembaca Anda.

Letakkan diTata Letak → Main Posts → Edit → bagian Komentar, kolom Label (nama kolom bisa sedikit berbeda di Blogger Anda)

Memilih sistem komentar yang dipakai di artikel. Bila kolom dibiarkan kosong, dipakai komentar Blogger.

Kode siap tempel

$type={blogger}

$type={disqus} $shortname={nama-disqus-anda}

$type={facebook} $lang={id_ID}

$type={hide}

Langkah

1. Buka Main Posts → Edit, cari pengaturan Komentar.
2. Isi kolom Label dengan salah satu kode, lalu Simpan.

Arti tiap bagian kode

Bagian	Artinya
blogger	Komentar bawaan Blogger.
disqus	Butuh $shortname dari akun Disqus.
facebook	$lang opsional untuk bahasa, misalnya id_ID.
hide	Menyembunyikan komentar.

LatihanTulis satu artikel pendek dengan tiga subjudul (format Heading), tambahkan {getToc} yang ditebalkan, satu tabel dengan baris pertama berisi <th>, lalu satu tombol unduh.