Membuat Daftar Isi Blog Otomatis Simpel dan Keren

Pentingkah daftar isi pada sebuah blog? Jawabannya mungkin Anda sudah tau. Disamping untuk menaikkan Page View suatu halaman artikel atau postingan yang diakses oleh pengunjung, sebuah daftar isi menjadikan sebuah referensi bagi pengunjung dalam mencari keseluruhan informasi dalam blog kita.

Ibarat sebuah rumah makan, ketika ada tamu yang berkunjung dan ingin menikmati jenis-jenis menu, tentu melihat daftar menu terlebih dahulu. Kita sebagai pelayan restoran apakah harus terpaku untuk menyodorkan pada satu jenis menu makanan saja? Jawabannya Tentu tidak! Padahal masih banyak menu-menu menarik lainnya yang bisa kita sodorkan.

Nah, agar menu - menu tersebut terlihat komplit maka kita harus menyodorkan menu lainnya agar si tamu tadi tidak jadi pindah ke restoran lain, lalu apa yang kita lakukan? Kita sodorkan saja Daftar Menu tersebut pada tamu tadi agar mereka bisa memilih sesuka hati menu apa yang ingin mereka cari.

Untuk sebuah blog, Fungsi Daftar Isi ini akan memberi kebebasan untuk para pengunjung atau pembaca untuk menikmati semua artikel yang ada di dalam blog layaknya memilih makanan di daftar menu restoran. Manfaat lainnya dengan membuat daftar isi untuk blog, yakni :

1. Artikel pada suatu blog akan lebih populer;
2. Artikel yang lama akan lebih mudah ditemukan lagi
3. Para pengunjung akan lebih bebas menemukan artikel tanpa harus mengetikkan keyword
4. Blog akan terlihat lebih profesional dan lebih atraktif

Menarik bukan? dengan menambakan kode javascript pada halaman posting. Daftar isi atau sitemap akan berfungsi untuk membantu pengunjung agar mereka tidak kesulitan dalam mencari artikel yang mereka butuhkan.

Langsung saja ke cara membuat daftar isi blog otomatis ya?

1. Buatlah sebuah postingan di halaman (page), beri judul "Daftar Isi" atau "Sitemap"
2. Copy kode dibawah ini kemudian paste pada postingan tersebut (paste kodenya pada mode edit html, bukan compose)
   
   

   <style type="text/css">
   #toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
   -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
   -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
   box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
   .labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
   padding:1px 0 2px 11px;background: #3498DB;
   border:1px solid #2D96DF;
   border-radius:4px;-moz-border-radius:4px;
   -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
   -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
   .labl a{color:#fff;}
   .labl:first-letter{text-transform:uppercase;}
   .new{color:#FF5F00;font-weight:bold;font-style:italic;}
   .postname{font-weight:normal;background:#fff;margin-left: 35px;}
   .postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
   </style>
   <div id="toc">
   <script src="https://cdn.jsdelivr.net/gh/syaifulsafril/Blog-Anak-Bangsa@main/sitemap_simple.js" type="text/javascript"></script>
   <script src="URL_BLOG/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
   </script></div>
   



3. Karena postingan bersifat statis, maka pada post option jangan ijinkan komentar, agar halaman daftar isi tidak dipenuhi komentar yang akan memberatkan blog anda.
4. Jangan lupa mengganti Tulisan tebal berwarna merah (URL_BLOG) dengan alamat blog anda
5. Publish, Selesai

Tampilan dari Daftar isi atau Sitemap ini dapat Anda lihat pada tombol Demo dibawah




Semoga Bermanfaat....