Pada awalnya saya melihat blog dengan CMS Wordpress yang memberikan TOC atau Table of Content di dalam postingannya. Sederhananya ini bisa kita sebut sebagai daftar isi dari sebuah postingan blog. Kenapa disebut sebagai daftar isi?
 |
| Contoh TOC pada sebuah artikel |
TOC ini akan memperlihatkan Header / Judul dan Sub Judul (h1, h2, h3) yang mana berasal dari keseluruhan artikel itu sendiri. Pada awal postingan akan tampil seperti Bab. Ini akan mempermudah pengunjung untuk memahami artikel anda. Bahkan akan memudahkan pembaca untuk membaca artikel sesuai dengan apa yang mereka cari jika artikel anda terlalu panjang.
Contohnya seperti berikut, Silakan anda coba pilih salah satu,
Ketika pembaca klik Judul pada TOC tersebut, maka akan langsung di bawa pada bagian artikel sesuai judul itu sendiri. Bagi para blogger dengan CMS blogger mungkin bertanya tanya apa mungkin ini diterapkan? Sementara bagi pengguna wordpress tentu ini sangar mudah dilakukan dengan cuma menginstall plug-in tertentu.
Baiklah untuk pengguna blogspot, berikut langkah membuat TOC pada artikel yang mana kita bagi menjadi dua tahap.
Setting pada CSS pada HTML Template Editor
Silakan masuk pada editor template anda dengan memilih Tema/Theme pada bilah kiri menu setelah masuk blogspot. Selanjutkan klik panah ke bawah di samping Sesuaikan dan pilih Edit HTML.
Letakkan kursor pada kode HTML. Selanjutnya dengan bersamaan gunakan CTRL+F pada keyboar anda harus ditekan. Ada kolom pencarian kecil di atas, dan ketikkan: </b:skin>.
Jika sudah menemukan, selanjutnya silakan letakkan kode berikut di atasnya.
#btn_toc { font-weight: 600; cursor: pointer;
border-top: 1px #cfcfcf dotted; border-bottom: 1px #cfcfcf dotted;
}
#btn_toc:focus,
#toc li:focus,
.back_toc:focus {
outline: none
}
#btn_toc svg {
vertical-align: middle;
}
#toc li,
.back_toc {
cursor: pointer
}
#toc {
display: grid;
}
:target::before {
content: "
"
;
display: block;
visibility: hidden;
}
Setelah itu silakan Simpan perubahan template tersebut. Berikutnya, yang harus anda lakukan ketika menulis artikel agar TOC ini muncul adalah.
Kembali ke Daftar Isi ↑
Menulis Postingan Blogspot agar muncul TOC
Pastikan anda nanti akan menulis konten dengan beberapa Judul atau subjudul atau dalam istilah penulisan disebut dengan Header. Karena barang inilah yang akan mengisi TOC tersebut.
Tempatkan posisi TOC dengan meletakkan kode berikut ini. Harus diingat penulisan harus dalam mode HTML.
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Table of Contents <svg height="18" viewbox="0 0 24 24" width="18"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000"></path></svg></div>
<div id="toc">
<ul>
<li><a href="#1" title="Judul">Poin 1</a></li>
<li><a href="#2" title="Judul">Poin 2</a>
<ol>
<li><a href="#2.1" title="Judul">Subpoin 2</a></li>
<li><a href="#2.2" title="Judul">Subpoin 2</a></li>
</ol>
</li>
<li><a href="#3" title="Judul">Poin 3</a></li>
</ul>
</div>
Penempatan bisa dilakukan pada paragraf 1, bagian atas postingan setelah alinea ke dua atau terserah kamu aja mas.
Bagian yang berwarna merah bisa anda tambahkan sesuai banyak header pada postingan anda. Sementara itu pada setiap Judul dan sub judul harus diberi id pada tag div. Silakan anda buat headernya dalam postingan. Kemudian alihkan ke mode penulisan HTML dan tambahkan id pada tag <h1... < h2.... Contohnya,
<h2 id="1">Ini Header untuk TOC</h2>
id yang berwarna biru (angka 1) harus disesuaikan dengan #1 (setelah href pada kode berwarna merah.)
Untuk diakhir sebuah artikel dalam satu header, terakhir anda harus tambahkan.
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Back to Content ↑</div>
Kode ini untuk mengarahkan pembaca kembali pada daftar isi atau TOC di atas tadi. Coba saja di demo berikut
Kembali ke TOC ↑
No comments:
Post a Comment