Pada artikel kali ini, Yaitu Membuat Daftar Isi di Blog Post Secara Otomatis di Blogspot, Ngomong-ngomong tentang Daftar Isi pada Blog, Daftar Isi di dalam Blog Post adalah yang menampilkan List Heading dan Sub Heading di dalam tulisan tersebut. 

Di artikel ini, Saya akan menjelaskan Membuat Daftar Isi di Blog Post Secara Otomatis di Blogspot atau Blogger ya. Yuk mari simak dibawah ini.

Ohiya, sebelum melanjutkan ke langkah-langkahnya, Kita musti persiapkan dahulu. Karena Blogspot ini kita kudu berurusan dengan Kode-Kode HTML, CSS dan JavaScript. Tidak seperti Shortcode di WordPress yang Sesederhana. Si Blogspot ini memiliki fitur yang sangat terbatas dan tidak memiliki Plugin tidak seperti WordPress.

Membuat Daftar Isi di Blog Post di Blogspot, Berikut Langkah-Langkahnya :

Daftar Isi di dalam Blog Post ini sebenarnya konsepnya sangat sederhan. Di tiap-tiap Heading dan Sub Heading bakalan dikasih ID yang unik. Setelah itu, kita bikin List Teks Heading dan Sub Heading itu, Lalu kita pasangkan Link dengan target ke ID tersebut. Bisa banget dibikin Manual. Silahkan simak langkah-langkahnya d Link berikut ya: 

Tetapi kalau Manual kan sangat melelahnya yak. Apa lagi kudu utak-atik HTML terus. Lebih Mudah dan Praktis kalau bisa di Generate secara Otomatis. Beginilah langkah-langkah untuk membuat daftar isinya secara otomatis.

#1 : Backup Themes Blog Terlebih Dahulu.

Untuk membuat Daftar Isi di dalam Blog Post secara Otomatis ini kita perlu utak-atik HTML dari Themes atau Template Blog. Biar aman, mending Backup dahulu aja Themes nya. Jadi kalau nanti ternyata ada yang salah dan Blog nya menjadi Error, Blog nya bisa di Restore lagi.

Untuk melakukan Backup, Silahkan klik menu Themes di Dashboard Blog. Lalu klik tanda panah bawah yang ada di tombol Customize, Pilih menu Backup. Lalu Simpan File Backup nya.

#2 : Tambahkan Kode untuk Generate Link Daftar Isi tersebut.

• Heading untuk H2
• Sub-Heading untuk H3
• Minor Heading untuk H4

#3 : Tambahkan Kode Untuk Menampilkan Daftar Isi.

Langkah berikutnya, kita perlu menambahkan Kode untuk menampilkan Daftar Isi yang sudah di Generate sebelumnya menggunakan Kode di atas. Masih di menu Edito HTML. Silahkan cari Kode <data:post.body/>.

Lalu, Ganti Kode di Kotak Merah di atas dengan Kode berikut :

<div id='post-toc'> <div class='bwstoc' id='bwstocwrap' style='display: inline-block;'> <div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div> <ul id='bwstoc' style='display: none;'/> </div> <data:post.body/> <script> bwstoc(); </script> </div>

Kode di atas adalah Default nya untuk menampilkan Daftar Isi dalam kondisi tertutup. Kalau mau Membuka nya kita perlu klik link Tampil. Ohiya, kata Tampil atau Tutup ini bisa kalian ganti sendiri ya menggunakan Kata lain, Misalnya mau pakai Show dan Hide atau Tampilkan dan Sembunyikan dan sebagainya. Kata Konten kalau ingin diganti juga silahkan.

Kalau mau Daftar Isi nya muncul dalam kondisi Terbuka, Silahkan gunakan Kode berikut :

<div id='post-toc'> <div class='bwstoc' id='bwstocwrap' style='display: block;'> <div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div> <ul id='bwstoc' /> </div> <data:post.body/> <script> bwstoc(); </script> </div>

#4 : Simpan Themes Blogspot dan Check Hasilnya.

Kalau sudah beres, tinggal klik Icon disket alias Save yang berada di kanan atas. Periksa juga di Artikel yang sudah mempunyai Heading, Apakah Daftar Isinya muncul sesuai yang kalian inginkan atau belum.

Berikut contoh hasilnya :