Baca ya : Cara Praktis Membuat Daftar Isi Otomatis Super Filter di Blog

Cara Praktis Membuat Daftar Isi Otomatis Super Filter di Blog, sesudah waktu itu aku menjelaskan kepada Anda semua mengenai "Cara Praktis Membuat Daftar Isi Otomatis [Sitemap] Blog Yang Keren". Sekarang aku akan menjelaskan kembali mengenai cara menciptakan daftar isi otomatis di blog, namun beda menyerupai waktu itu aku disini akan memperlihatkan script daftar isi dengan javascript yang super filter berdasarkan saya. Mengapa begitu? Karena pada daftar isi kini itu sanggup di filter dengan banyak sekali filter dan apa saja itu.

Cara Membuat Daftar Isi Otomatis Super Filter

Dalam menciptakan daftar isi otomatis super filter sama menyerupai menciptakan daftar isi otomatis blog yang keren yang sebelumnya sudah aku berikan, namun berbeda pada fungsinya saja. Untuk melihat bagaimana kesannya sanggup 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 dibentuk ini. Anda juga sanggup menggunakan laman daftar isi blog Anda sebelumnya dengan menghapus semua script sebelumnya pada mode HTML biar lebih bersih.


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


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

#Style

<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 sanggup menggantinya apabila sudah mengerti untuk mengupload kembali atau menghostingkan javascript ataupun baca ini Cara Daftar dan Hosting Javascript / CSS di GitHub. Untuk file javascriptnya sanggup di download disini. Namun apabila belum mengerti cukup pakai script yang diatas saja dan hiraukan soal javascript.


4. Setelah Anda memasukan script yang aku berikan diatas, klik "Publikasikan" atau "Perbarui" untuk yang menggunakan 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 aku jelaskan. Mengapa daftar isi ini disebut super filter? Sesuai dengan namanya yaitu alasannya memang daftar isi ini sanggup di filter atau diurutkan dengan di klik berdasarkan.

1. POST TITLE

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

2. POST DATE

Post date atau Tanggal Postingan dalam daftar isi ini juga sanggup 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 niscaya akan mempermudah pengunjung untuk mencari suatu artikel dalam blog Anda.

Baca juga "Cara Menyembunyikan Gambar pada Postingan Blog"

3. Nama Label

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

4. LABELS

Sedangakn Labels yang aku maksud disini yakni kata "LABELS" yang terdapat pada bab 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 contohnya 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 menyerupai defaultnya yaitu berdasarkan Tanggal Postingan (Date Post).

Baca juga "Cara Menyembunyikan Teks pada Postingan Blog"

Begitulah mengapa aku memperlihatkan judul pada daftar isi ini Super Filter, alasannya memang filternya yang luar biasa menyerupai yang aku jelaskan diatas. Dengan daftar isi super filter tersebut maka pengunjung blog Anda akan lebih gampang dalam mencari suatu artikel yang terdapat pada blog.

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

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

Begitulah artikel aku kali ini yang membahas mengenai Cara Praktis Membuat Daftar Isi Otomatis Super Filter di Blog, apabila ada yang ingin ditanyakan atau tidak mengerti cara memasang daftar isi pada blog Anda sanggup memperlihatkan komentar dibawah atau hubungi aku di Kontak, terima kasih.
Sumber http://www.bloggars.com/

Tweet

Subscribe to receive free email updates: