Salah satu cara untuk meningkatkan kemudahan dan kenyamanan pembaca dalam mengakses keseluruhan isi dari suatu konten postingan blog dengan pembahasan yang cukup panjang lebar adalah dengan menyediakan Table Of Contents atau dalam bahasa indonesia disebut Daftar Isi.

1. Apa Itu Table Of Contents (TOC)?
2. Apa Fungsi dan Manfaat dari Table Of Contents?
3. Bagaimana Cara membuat dan Memasangnya?

Pengertian Table Of Contents (TOC)

Table Of Content (TOC) atau dalam bahasa indonesia lebih dikenal dengan Daftar Isi Postingan yaitu merupakan rangkuman/ringkasan pokok-pokok pembahasansuatu konten postingan blog. Dapat diartikan juga sebagai ringkasai beberapa sub judul postingan yang merupakan penjabaran dari Judul Utama (Pokok Pembahasan) yang mewakili point-point penting dan intisari dari isi postingan.

Fungsi dan Manfaat Table Of Contents (TOC)

Sebagaimana disinggung di atas bahwa Table Of Content (TOC) merupakan rangkuman atau ringkasan yang mewakili inti atau point-point penting dan intisari dari postingan menunjukkan bahwa fugnsi dari adanya Table Of Content (TOC) dalam sebuah postingan adalah untuk memberikan gambaran sekilas mengenai apa saja yang di bahas dalam sebuah postingan sehingga tanpa membaca secara keseluruhan pengguna atau pembaca dapat mengetahui poko pembahasan dan tujuan yang ingin dicapai.

Adapun manfaat dari adanya Table Of Content (TOC) atau Daftar isi pada sebuah postingan blog adalah untuk memudahkan pengguna atau pembaca dalam memilih point-point penting yang ada di dalam postingan sesuai dengan yang dibutuhkan. Sehingga pembaca tidak perlu membaca secara keseluruhan dari awal sampai akhir atau harus menganalisa dan mencari apa yang dibutuhkan di dalam postingan dengan penjelasan yang panjang lebar. Intinya pembaca dapat secara langsung melompat ke point inti yang menjelaskan apa yang dibutuhkan dan sedang di cari olehnya.

Cara Membuat dan Memasang Daftar Isi di Postingan Blogger

Untuk bisa menggunakan fitur Table Of Contens (Daftar Isi Postingan) Anda harus memasang 2 buah source code yang terdiri dari kode CSS dan kode HTML. Kedua kode tersebut ditempatkan pada area yang berbeda. Untuk kode CSS ditempel atau ditanam di dalam kode penyusun template (Edit HTML pada menu Tema) dan untuk kode HTML di tempel dan ditanam di dalam postingan yang akan diberi fitur Daftar Isi (Table of Contents).

Pertama-tama silahkan salin source kode CSS berikut ini:

 

  /* Table Of Content by idnxmus.com */
#toc_wrapper {
   background:#ddd;
   max-width:450px;
   position:relative;
   padding:10px;
   border-radius:4px;
   margin:20px auto;
}
.tombol_toc {
   position: relative;
   font-weight: bold;
   outline: none;
}
.tombol_toc svg {
   float:right;
}
#daftarisi {
   background:#fff;
   padding:10px 10px 0;
   border-radius:4px;
   margin-top:10px;
   -webkit-box-shadow: 0 2px 15px rgba(0,0,0,.05);
   box-shadow:0 2px 15px rgba(0,0,0,.05);
}
#daftarisi a {
   text-decoration:none;
}
#daftarisi ul {
   padding:0 0 0 20px;
   margin:0
}
#daftarisi ul li.lvl1 {
   line-height:1.8em;
   padding:4px 0;
}
#daftarisi ul li.lvl1:nth-child(n+2) {
   border-top:1px dashed #ddd;
}
#daftarisi ul li.lvl1 a {
   font-weight:600;
}
#daftarisi ul li.lvl2 a {
   font-weight:400;
}
#daftarisi ul li a:hover {
   text-decoration:underline;
}
:target::before {
   content:"";
   display:block;
   height:40px;
   margin-top:-40px;
   visibility:hidden;
}

Salin dan temptel kode di atas di bawah kode style amp-custom lebih jelasnya perhatikan screenshot berikut ini:





Setelah anda temukan lokasinya, tempelkan kode di bawah style amp-custom dan klick Simpan Tema untuk menerapkan.

Langkah Kedua yaitu menempel atau menanam kode Daftar Isi ke dalam postingan yang akan dipublikasikan. Silahkan salin kode HTML berikut ini:

 

<div id="btn_toc" on="tap:toc.toggleVisibility" role='button' tabindex='0'><b>Daftar Isi</b> <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" 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" /></svg></div>
<div id="toc">
<ol>
<li><a href="#Langkah" title="Langkah Membuat Blog Bagi Pemula">Langkah Membuat Blog Bagi Pemula</a></li>
<li><a href="#Penghasilan" title="Sumber Penghasilan Mengelola Blog">Sumber Penghasilan Mengelola Blog</a></li>
</ol>
</div>

Tempelkan kode di dalam postingan dengan mode penulisan HTML bukan Compose.



Kemudian gunakan kode berikut ini untuk pewakili Sub Judul yang ditampilkan di Daftar Isi

 
<h1 id="Langkah">Langkah Membuat Blog Bagi Pemula</h1>

Gunakan kode berikut ini sebagai navigasi back to Daftar Isi, silahkan sesuaikan peletakan sesuai keinginan anda

 
<div class="back_toc" on="tap:toc.scrollTo('position' = 'center')" role="button" tabindex="0"><b>Kembali ke Daftar Isi</b> ↑</div>

Hasil dari pemasangan Daftar Isi di dalam Postingan (Table of Contents) kurang lebih seperti capture di bawah ini:


Fitur Daftar Isi di dalam postingan ini dilengkapi dengan navigasi back to, sehingga apabila pembaca ingin kembali mengakses Daftar Isi tidak perlu menggulir mouse cukup satu kali klick saja dan juga fitur Daftar Isi ini dilengkapi dengan efek show hide.

Kesimpulan dan Saran

Adanya Fitur Table of Contents (Daftar Isi Postingan) yang bermanfaat untuk meningkatkan kenyamanan dan kemudahan pembaca untuk mengakses keseluruhan isi postingan blog sesuai dengan apa yang dicari atau yang dibutuhkan tanpa harus membaca secara keseluruhan postingan dari awal sampai akhir dan juga dengan adanya fitur Daftar Isi di Postingan ini akan memberikan kesan konten postingan lebih berkualitas dan memberikan pengalaman tersendiri bagi pembaca karena tidak semua blogger menerapkan metode ini.

Jadi saya rekomendasikan bagi anda yang belum menggunakan Fitur Daftar Isi di Postingan Blog ini untuk mencobanya, agar blog tampak lebih profesional dalam metode penulisan konten postingan dan memudahkan pembaca menikmati apa yang anda sajikan.