Membuat Tabel of Contents di Posting Blogger

tetibal.blogspot.com - Saat berkunjung ke situs Wikipedia sobat pasti akan disuguhkan daftar isi artikel, dimana ketika di klik akan otomatis langsung menuju ke menu yang dituju, fitur tersebut bernama table of contents.

Tabel of Content atau bisa juga disebut daftar isi sangat penting adanya pada sebuah posting blog karena akan memudahkan pengunjung untuk langsung pergi ke menu yang dicari, terutama pada sebuah artikel yang sangat panjang.

Selain berfungsi sebagai jump link pada posting blog, Table of contents juga sangat bermanfaat untuk SEO. Karena menu tersebut akan ikut terindex dan tampil pada halaman pencarian Google.

Jika sobat ingin mengaplikasikan Tabel of Contents ini pada blog caranya cukup mudah hanya menggunakan beberapa kode CSS dan HTML saja.

Dibawah ini adalah contoh Tabel of Content yang akan kita buat :

Daftar isi

• 1 Pemasangan kode CSS
• 2 Penulisan kode HTML di Posting
• 2 Sembunyikan Menu Daftar Isi
• 3 Tombol Sembunyikan/Tampilkan Tidak Muncul

Tanpa perlu berlama-lama mari kita simak tentang cara membuat Tabel of Contents pada posting di blogger.

1. Pemasangan kode CSS

Pertama sobat perlu menambahahkan kode CSS Tabel of Contents ini untuk mepercantik tampilan, Copy kode dibawah ini di atas tag penutup </style> atau ]]></b:skin>

/* Table of Contents */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h3 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px;  visibility:hidden}

Perhatikan deretan kode terakhir :target::before. Jika sobat memakai menu sticky header/navigasi, ubah height dan margin-top sesuai dengan ukuran header/navigasi yang dipasang. Misal ukurannya 50px, maka ubah menjadi height:50px dan margin-top:-50px.

2. Penulisan kode HTML di Posting

Sekarang kita tinggal mengaplikasikan pada postingan di blogger. Pastikan sobat memilih mode HTML bukan Compose saat membuat posting baru. Lalu simpan kode dibawah ini pada bagian awal atau dimana Table of Contents di tampilkan.

<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>
  <ul>
    <li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
    <li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
    <li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
    <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
    <li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a></li>
  </ul>
</div>

#toc1, #toc2 dan seterusnya adalah tag pemanggilnya. Sobat bisa menambahkan atau mengurangi sesuai dengan kebutuhan.

Kemudian atur penulisan pada bagian heading atau judul di posting dengan menyertakan id yang sama dengan table of contents. Contohnya seperti ini.

<h3 id="toc1">Judul Satu</h3>
...isi paragraf satu
<h3 id="toc2">Judul Dua</h3>
...isi paragraf dua
<h3 id="toc3">Judul Tiga</h3>
...isi paragraf tiga
<h3 id="toc4">Judul Empat</h3>
...isi paragraf empat
<h3 id="toc5">Judul Lima</h3>
...isi paragraf lima

3. Sembunyikan Menu Daftar Isi

Jika sobat ingin daftar isi atau table of contents disembunyikan saat dimuat cukup tambahkan tulisan checked pada tag input seperti dibawah ini:

<input type="checkbox" role="button" id="toctoggle" class="toctoggle" checked><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>

4. Tombol "Sembunyikan/Tampilkan" Tidak Muncul

Masalah ini sering terjadi pada sebagian besar pengguna. Untuk mengatasinya, pastikan untuk TIDAK memberi line break <br/> (enter) di bagian header TOC.

Contoh yang benar seperti ini:

<input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h3>Daftar isi</h3><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div>

Dan ini adalah contoh yang SALAH:

<input type="checkbox" role="button" id="toctoggle" class="toctoggle">
<div class="toctitle">
  <h3>Daftar isi</h3>
  <span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span>
</div>

Mungkin sekian posting kali ini tentang Membuat Tabel of Contents di Posting Blogger, semoga mudah dipahami dan juga bermanfaat.
See you....

Lokasi:

Berbagi :