Membuat Daftar Isi Seperti Wikipedia di Postingan Blogger

Membuat daftar isi bermanfaat untuk memudahkan pembaca dalam mencari bahasan yang mereka inginkan. Daftar isi memang biasa kita temukan di dalam buku atau karya tulis yang berlembar-lembar, tetapi daftar isi juga bisa kita terapkan pada artikel blog atau website yang panjang.

Tujuan membuat daftar isi pada artikel atau postingan webiste sama seperti tujuan membuat daftar isi pada buku atau karya tulis lainnya, yaitu untuk memudahkan pembaca menuju bahasan yang diingkan secara langsung. 

Jika kalian biasa membaca artikel wikipedia, maka biasanya akan dijumpa daftar isi di awal halaman artikelnya. Nah, pada artikel tutorial kali ini, saya akan membuat fitur daftar isi seperti wikipedia di dalam postingan blog. Bagaimana cara membuatnya?, ayo ikuti selengkapnya berikut ini!.

Membuat Daftar Isi di Postingan Blogger

1. Masuk ke akun blogger kalian masing-masing → lalu masuk ke menu tema → lalu klik tombol tanda panah ke bawah → lalu klik edit HTML. 

2. Lalu cari tag </style>. Gunakan CTRL + F untuk memudahkan pencarian tag. Dan pastekan script CSS di bawah ini, tepat sebelum tag </style>

    
    

.daftarisi a:hover {
    text-decoration: underline
}

.daftarisi ul {
    margin: 0px;
    padding: 0px;
    text-align: left
}

.daftarisi ul li {
    list-style-type: none;
}

.daftarisi ul li a {
    margin-left: .5em
}

.daftarisi ul li ul {
    margin-left: 2em
}

.daftarisitogglelabel {
    cursor: pointer;
    color: #0645ad
}

:not(:checked)>.daftarisitoggle {
    display: inline !important;
    position: absolute;
    opacity: 0
}

:not(:checked)>.daftarisitogglespan:before {
    content: '['
}

.daftarisitoggle:not(:checked)+.daftarisititle .daftarisitogglelabel:after {
    content: 'sembunyikan';
    display: inline
}

.daftarisitoggle:checked+.daftarisititle .daftarisitogglelabel:after {
    content: 'tampilkan'
}

:not(:checked)>.daftarisitogglespan:after {
    content: ']'
}

.daftarisitoggle:checked~ul {
    display: none
}

:target::before {
    content: '';
    display: block;
    height: 0px;
    margin-top: 0px;
    visibility: hidden
}

.daftarisi {
    background-color: #f8f9fa;
    border: 1px solid #a2a9b1;
    padding: 10px 13px;
    display: table;
    line-height: 1.6em;
}

.daftarisi h2 {
    display: inline-block;
    margin-right: 10px
}

.daftarisi a {
    text-decoration: none
}

3. Selanjutnya buatlah sebuah post baru, lalu beralih ke tampilan HTML dan tambahkan script di bawah ini.

    

<div class="daftarisi">
    <input type="checkbox" role="button" id="daftarisitoggle" class="daftarisitoggle">
    <div class="daftarisititle">
        <h2>Daftar isi</h2><span class="daftarisitogglespan"><label class="daftarisitogglelabel" for="daftarisitoggle"></label></span>
    </div>
    <ol>
        <li><a href="#daftarisi1" title="Judul Satu">Judul Satu</a></li>
        <li><a href="#daftarisi2" title="Judul Dua">Judul Dua</a></li>
        <li><a href="#daftarisi3" title="Judul Tiga">Judul Tiga</a></li>
        <li><a href="#daftarisi4" title="Judul Empat">Judul Empat</a></li>
        <li><a href="#daftarisi5" title="Judul Lima">Judul Lima</a></li>
    </ol>
</div>

Sedikit penjelasan, a href="#daftarisi1" dan seterusnya adalah identitas dari setiap judul di dalam artikel yang kita buat. Istilahnya sebagai target atau link, saat diklik target tersebut akan menuju judul yang dimaksud. Jika kalian preview makan tampilannya persis seperti daftar isi pada wikipedia.

Contoh daftar isi

4. Setelah kita membuat daftar isi, kita perlu membuat judul dari masing-masing daftar isi, Karena kita mempunyai 5 daftar isi, maka buatlah 5 judul yang berbeda-beda.

Membuat 5 Judul Berbeda

5. Selanjutnya tambahkan id pada setiap judul, caranya buka tampilan HTML, lalu tambahkan id="..." seperti gambar di bawah ini

Menambahkan id pada setiap judul

Lakukan hal yang sama pada setiap judulnya, dan jangan lupa disesuaikan antara link dan judul agar tidak tertukar. Satu tips lagi, dari saya. Jika tampilan HTML-nya berantakan, kalian bisa menekan icon format HTML untuk merapikan text.

Cara merapihkan script

6. Silahkan publish artikel yang kalian buat, selanjutnya lakukan uji coba. Jika berhasil maka tampilannya akan tampak seperti gambar gif di bawah ini.

Hasil daftar isi

Bagaimana?, cukup mudah bukan. Sekian tutorial cara membuat daftar isi seperti wikipedia pada postingan blogger. Jika ada kendala silahkan tanya langsung di kolom komentar di bawah post ini. Semoga membantu, dan sampai jumpa di tutorial blogger menarik lainnya.