Cara Membuat Daftar Isi/Table of Content di Postingan Blogger - Marzep Design

Cara Membuat Daftar Isi/Table of Content di Postingan Blogger

Cara Membuat Daftar Isi Postingan Blog - Membuat daftar isi di dalam artikel atau postingan sangat bermanfaat untuk pengunjung agar memudahkan dalam menjelajahi semua isi postingan tersebut, lalu bagaimana jika daftar isi di dalam postingan menggangu pengunjung? Tenang saja karana cara membuat daftar isi postingan blog ini bisa di tutup buka, shingga tidak akan menggangu pengunjung.

Cara Membuat Daftar Isi Postingan  Blog

Daftar isi atau nama lainya yaitu Table of Content, sudah terkenal sekali dikalangan blogger indonesia. Cara Membuat Table of Content di Blog banyak sekali tutorialnya dan modelnya beda-beda tutorial cara membuat daftar isi di dalam artikel blog ini mirip daftar isi atau table of content di wikipedia.

Pengertian Table Of Content

Table of Content (TOC) merupakan sebuah daftar isi pada postingan yang terdiri dari bab tau poin poin penting dalam artikel tersebut, Teable of Content layaknya sebuat daftar isi pada buku buku biasanya yang kita sering jumpai ketika membaca buku, untuk membudahkan kita mencari baba tau poin penting dalam buku biasanya kita mencarinya di daftar isi tersebut, sama seperti Table of Content yang memudahkan pengunjung untuk mencari topik pentingnya saja, samakan seperti daftar isi pada buku, namun jika daftar isi pada buku setelah mengetahui halaman yang ingin dibaca harus secara manual dibuka dulu.

Berbeda dengan Table of Content pada postingan satu klik saja poin mana yang ingin dibaca secara otomatis akan berpindah ke bagain yang ingin dibaca tersebut tidak perlu menyekrol ke atas bawah untuk membaca. Jadi, pembaca tidak perlu repot-repot scroll atas bawah untuk membaca. Contohnya seperti Table of Content di atas.

Cara Membuat Daftar Isi di Postingan Blogger

Berikut adalah tutorial cara membuat table of content (TOC) di dalam postingan blogger.

Langkah pertama sobat letakan kode CSS di bawah ini sebelum tag penutup ]]></b:template-skin> atau </style>.

/* Daftar Isi Postingan */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {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 yaitu :target::before. Jika kamu 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.

Sekarang masukan kerangka TOC nya di setiap postingan konten di blog sobat.

<div class="toc">
    <input type="checkbox" role="button" id="toctoggle" class="toctoggle">
    <div class="toctitle">
        <h2>Daftar isi</h2><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>
            <ul>
                <li>3.1 <a href="#toc3_1" title="Sub Judul Tiga ke Satu">Sub Judul Tiga ke Satu</a></li>
                <li>3.2 <a href="#toc3_2" title="Sub Judul Tiga ke Dua">Sub Judul Tiga ke Dua</a></li>
            </ul>
        </li>
        <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
    </ul>
</div>

#toc1 dan #toc lain adalah elemen pemanggilnya. Kamu bisa menambahkan atau mengurangi sesuai kebutuhan.

Selanjutnya sobat atur penulisan heading, sub heading atau minor heading di artikel dengan menyertakan id yang sama dengan table of contents. Contohnya di bawah ini.

<h2 id="toc1">
Judul Satu</h2>
...isi paragraf satu

<h2 id="toc2">
Judul Dua</h2>
...isi paragraf dua

<h2 id="toc3">
Judul Tiga</h2>
...isi paragraf tiga

<h3 id="toc3_1">
Sub Judul Empat ke Satu</h3>
...isi paragraf Tiga

<h3 id="toc3_2">
Sub Judul Tiga ke Dua</h3>
...isi paragraf Tiga

<h2 id="toc4">
Judul Empat</h2>
...isi paragraf Empat

Berikut contoh gambarnya.

Cara Membuat Daftar Isi di Postingan  Blog

Nah! bagaimana sob bisa dimengerti? Gambar di atas contoh simplenya untuk Demonya silahkan sobat klik disni.

Penutup...

Itulah Cara Membuat Daftar Isi/Table of Content di Postingan Blogger, semoga mudah dimengerti dan bermanfaat bagi banyak orang, terima kasih.

1 Response to "Cara Membuat Daftar Isi/Table of Content di Postingan Blogger"

Note :
- Di larang pasang link aktif di kolom komentar
- Komentar akan disetujui jika tidak mengandung promosi
- Komentar boleh menggunakan bahasa banjarmasin
- Dilarang komentar yang berisi pornografi
- Jangan harap komentar yang berisi link aktif akan disetujui

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel