Cara Mudah Membuat Daftar Isi Otomatis Super Filter di Blog

Cara Mudah Membuat Daftar Isi Otomatis Super Filter di Blog, setelah waktu itu saya menjelaskan kepada Anda semua mengenai "Cara Mudah Membuat Daftar Isi Otomatis [Sitemap] Blog Yang Keren". Sekarang saya akan menjelaskan kembali mengenai cara membuat daftar isi otomatis di blog, namun beda seperti waktu itu saya disini akan memberikan script daftar isi dengan javascript yang super filter menurut saya. Mengapa begitu? Karena pada daftar isi sekarang itu bisa di filter dengan berbagai filter dan apa saja itu.

Cara Membuat Daftar Isi Otomatis Super Filter

Dalam membuat daftar isi otomatis super filter sama seperti membuat daftar isi otomatis blog yang keren yang sebelumnya sudah saya berikan, namun berbeda pada fungsinya saja. Untuk melihat bagaimana hasilnya bisa dilihat pada daftar isi blog ini apabila masih memakainya lihat DEMO. Langsung saja berikutlah cara membuatnya.

1. Pertama Anda harus sudah dalam keadaan login di Blogger.
2. Pada Dashboard blogger, masuklah pada "Laman" dan buat Laman Baru untuk daftar isi yang akan dibuat ini. Anda juga bisa menggunakan laman daftar isi blog Anda sebelumnya dengan menghapus semua script sebelumnya pada mode HTML supaya lebih bersih.


Baca juga "2 Cara Menambahkan Tanda Admin/Author pada Komentar Blog"


3. Berilah judul pada laman apabila membuat yang baru misalkan "Daftar Isi" ataupun "Sitemap". Setelah itu masukanlah script berikut jangan lupa pada mode HTML bukan Compose.

#Style BloggARs

<style type="text/css">
#bp_toc{border:1px solid #00a3c1;color:#666;float:left;margin:0 auto;padding:0;width:99%;}
span.toc-note{display:none;}
#bp_toc tr:nth-child(2n){background:#ecf3f4;}
td.toc-entry-col1 a{font-weight:bold;}
.toc-header-col1,.toc-header-col2,.toc-header-col3{background:#00a3c1;}
.toc-header-col1{padding:10px;width:250px;}
.toc-header-col2{padding:10px;width:85px;}
.toc-header-col3{padding:10px;width:125px;}
.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:15px;text-decoration:none;color:#fff;font-weight:700;letter-spacing:0.5px;}
.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none;}
.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:5px;text-align:left;}
.toc-entry-col3{padding-left:10px}
#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1{counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber)".";min-width:1em;min-height:4em;float:left;border-right:1px solid #fff;padding:0 5px;text-align:center;margin-right:10px;}
td.toc-entry-col2{text-align:center;}
</style>
<div id="bp_toc">
<script src="https://cdn.rawgit.com/aramdan/share/master/sitemapsf.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc">
</script></div>

Catatan: Untuk url javascript yang berwarna merah Anda bisa menggantinya apabila sudah mengerti untuk mengupload kembali atau menghostingkan javascript ataupun baca ini Cara Daftar dan Hosting Javascript / CSS di GitHub. Untuk file javascriptnya bisa di unduh disini. Namun apabila belum mengerti cukup pakai script yang diatas saja dan hiraukan soal javascript.


4. Setelah Anda memasukan script yang saya berikan diatas, klik "Publikasikan" atau "Perbarui" untuk yang memakai laman yang sudah ada (lama).
5. Selesai sudah daftar isi otomatis duper filter sudah dipasang pada blog Anda.

Baca juga "Meta Tag Facebook Open Graph Yang Dibutuhkan Blog"

Penjelasan Super Filter

Kita masuk ke pertanyaan diatas tadi yang belum saya jelaskan. Mengapa daftar isi ini disebut super filter? Sesuai dengan namanya yaitu karena memang daftar isi ini bisa di filter atau diurutkan dengan di klik berdasarkan.

1. POST TITLE

Post title atau dalam Bahasa Indonesia Judul Postingan pada daftar isi yang saya berikan bisa di klik untuk memfilter postingan berdasarkan Alfabet dari judul post maupun dari awal atau akhir. Dengan begitu pengunjung akan lebih mudah dalam mencari suatu artikel dalam blog Anda.

2. POST DATE

Post date atau Tanggal Postingan dalam daftar isi ini juga bisa di klik yang nantinya akan memfilter atau diurutkan berdasarkan tanggal dari postingan yang Anda buat pada blog maupun dari tanggal awal ataupun terakhir. Dengan ini juga sudah pasti akan mempermudah pengunjung untuk mencari suatu artikel dalam blog Anda.

Baca juga "Cara Menyembunyikan Gambar pada Postingan Blog"

3. Nama Label

Nama label yang saya maksud disini adalah label atau tag pada suatu postingan. Contohnya apabila pengunjung blog mengklik label Script dan HTML, maka yang akan muncul adalah postingan yang mempunyai tag Script dan HTML tersebut dan apabila pengunjung mengklik label SEO maka akan muncul postingan yang mempunyai tag SEO, ataupun label lainnya. Begitulah cara kerjanya apabila Nama Lebel di klik.

4. LABELS

Sedangakn Labels yang saya maksud disini adalah kata "LABELS" yang terdapat pada bagian judul tabel yang terdapat pada tabel di Daftar Isi. Kata LABELS pada daftar isi ini berfungsi untuk mengembalikan ke semula apabila pengunjung Anda sudah mengklik salah satu label pada daftar isi misalnya label Script dan HTML tadi dengan begitu hanya sebagian postingan saja yang akan muncul yaitu yang terdapat tagnya  saja. Nah kata labels yang akan mengembalikannya ke semula sehingga semua postingan dan artikel akan muncul semuanya seperti defaultnya yaitu berdasarkan Tanggal Postingan (Date Post).

Baca juga "Cara Menyembunyikan Teks pada Postingan Blog"

Begitulah mengapa saya memberikan judul pada daftar isi ini Super Filter, karena memang filternya yang luar biasa seperti yang saya jelaskan diatas. Dengan daftar isi super filter tersebut maka pengunjung blog Anda akan lebih mudah dalam mencari suatu artikel yang terdapat pada blog.

Javascript yang saya bagikan bersumber dari http://www.mybloggerlab.com/, nama penulisnya Syed Faizan Ali. Kemudian saya upload kembali dengan mengeditnya pada Bahasa atau translate lebih tepatnya yang awalnya Bahasa Inggris kemudian translate kedalam Bahasa Indonesia dan menambahkan tag pada blog saya ini dengan tidak mengurangi rasa hormat saya pada pembuat jQuerinya yang terdapat pada javascript tersebut.

Post sebelumnya "Jangan Beli Domain Murah Sembarangan, Bahaya!!"

Begitulah artikel saya kali ini yang membahas mengenai Cara Mudah Membuat Daftar Isi Otomatis Super Filter di Blog, apabila ada yang ingin ditanyakan atau tidak mengerti cara memasang daftar isi pada blog Anda bisa memberikan komentar dibawah atau hubungi saya di Kontak, terima kasih.