Advanced Blogspot Table of Contents (Indonesia)

view in English Language

Ide ini tercetus ketika saya membaca dari blognya para sesepuh-sesepuh yang udah nge-share gimana caranya untuk membuat yang mereka bilang table of contents (ga tau cara nyebutnya dalam bahasa sendiri) untuk blogspot. Anda bisa mengunjungi blog mereka

• TOC oleh Beatiful Beta @ beautifulbeta.blogspot.com
• How to Create a Sitemap with Google Feed Control oleh Amanda @ bloggerbuster.com
• Table of Contents oleh Abu Farhan @ abu-farhan.com

Terus dari ketiga blog diatas, saya mendapat pengetahuan baru mengenai blogger feed, & JSON. 

Dari situ saya berkeinginan untuk membuat table of contents yang bentuknya mirip seperti PHP, ada fasilitas pencarian dan navigasi halaman untuk mengindex data dari database, tapi dengan menggunakan javascript. Dengan referensi Google, saya modifikasi script yang digunakan Beautiful Beta sesuai dengan porsi untuk membuat widget ini.

lihat DEMO

Cara Penggunaan :
1. Login ke akun blogger Anda.
2. Buat Posting atau Page baru.
3. Pilih tab HTML
3. Masukkan kode dibawah ini

<script type="text/javascript">
var labels = [];
var type = 'cloud';
var sorting = 'titleasc';
var numChars = 250;
var newestFlags = 10;
var numDisplay = 10;
var adjacents = 2;
var exception = false;
var slwep = true;
var incLabelAll = true;
</script>
<script src="http://cluster-project.googlecode.com/svn/trunk/public/init-toc.js" type="text/javascript"></script>
<script src="http://YOUR-BLOG-URL/feeds/posts/summary?max-results=0&alt=json-in-script&callback=inittoc" type="text/javascript"></script>
<script src="http://cluster-project.googlecode.com/svn/trunk/public/toc.js" type="text/javascript"></script>

mengenai penjelasan variabel-variabel yang digunakan, seperti labels, type, sorting, numChars, dll, bisa dilihat di Penjelasan Detail

4. Ganti YOUR-BLOG-URL dengan alamat blog Anda
5. Lalu publish postingan Anda
6. masuk ke Design / Rancangan -> Edit HTML untuk tampilan blogger yang lama, untuk tampilan blogger yang baru Template -> Edit HTML
7. centang Expand Template Widget (Backup Template Anda bila perlu)
8. cari kode  ]]></b:skin>
9. Masukkan kode CSS berikut sebelum  ]]></b:skin>

div#toc-header, div#toc-display, div#toc-footer, table#toc-body {
 width:100%;
}

div#toc-header {
 font-size:12px;
 text-align:center;
}

div#toc-display, div#toc-footer, div#toc-display input[type="text"], div#toc-display select {
 font-size:11px;
}

div#toc-display, div#toc-footer {
 margin-top:30px;
}

div#toc-header a, div#toc-footer a, div#toc-header span, div#toc-footer span {
 color:#000;
 margin:2px;
}

div#toc-header a, div#toc-header span {
 padding:3px 5px;
 display:inline-table;
}

div#toc-footer a, div#toc-footer span{
 padding:1px 3px;
}

div#toc-header a , div#toc-footer a {
 background-color:#F0F0F0;
 border:1px solid #E0E0E0; 
 text-decoration:none;
}

div#toc-header span, div#toc-footer span {
 background-color:#FFF;
 border:1px solid #FFF;
}

div#toc-header a:hover, div#toc-footer a:hover {
 background-color:#FBFBFB;
}

table#toc-body {
 border-collapse:collapse;
 border-spacing:0;
 font-size:12px;
}

table#toc-body tr th, table#toc-body tr td {
 padding:3px;
}

table#toc-body tr th {
 border:2px solid #FFF;
 background-color:#F0F0F0;
 text-align:left;
}

table#toc-body tr th a, table#toc-body tr td a {
 border:none;
}

table#toc-body tr th a {
 border:none;
 color:#000;
 font-size:13px;
 text-decoration:none;
}

table#toc-body tr th a:hover, table#toc-body tr td a:hover {
 text-decoration:underline;
}

div#donotremove, div#toc-loading {
 font-size:9px;
 margin-top:20px;
 text-align:center;
}

div#donotremove {
 color:#DDD; 
}

div#toc-loading {
 color:#AAA;
 position:relative;
 top:8px;
}

div#toc-loading img {
 position:relative;
 top:10px;
}

div#donotremove a {
 border: none;
 color:#AAA;
 text-decoration:none;
}

10. Simpan Template Anda

Selamat Mencoba, Semoga Bermanfaat

Penjelasan Detail : (Di bawah ini cuma penjelasan, tidak untuk ditambahkan ke dalam blog)

Pada bagian ini saya akan mencoba untuk menjelaskan mengenai variabel-variabel yang fungsinya digunakan untuk merubah tampilan dan setting widget table of contens ini

1. var labels
Pilihan yang bisa digunakan

var labels = [];
//akan menampilkan semua label dalam blog
var labels = ['Nama Label','Nama Label','Nama Label'];
//hanya menampilkan label yang sudah dideklarasikan dalam array, 
//label yang mempunyai 0 posting tetap akan tercetak bila var slwep di set true

DEMO semua label || DEMO label tertentu 1 || DEMO label tertentu 2

2. var type
Pilihan yang bisa digunakan

var type = 'cloud';     //menampilkan label tipe cloud
var type = 'dropdown';  //menampilkan label tipe dropdown
var type = '';          //tidak menampilkan label

DEMO cloud || DEMO dropdown || DEMO none

3. var sorting
Pilihan yang bisa digunakan

var sorting = 'titleasc';      //urutkan berdasarkan judul posting ascending
var sorting = 'titledesc';     //urutkan berdasarkan judul posting descending
var sorting = 'datenewest';    //urutkan berdasarkan posting terbaru
var sorting = 'dateoldest';    //urutkan berdasarkan posting terlama
var sorting = 'updatenewest';  //urutkan berdasarkan update posting terbaru
var sorting = 'updateoldest';  //urutkan berdasarkan update posting terlama

DEMO titleasc || DEMO titledesc || DEMO datenewest || DEMO dateoldest || DEMO updatenewest || DEMO updateoldest

4. var numChars
Pilihan yang bisa digunakan

var numChars = number;     
//membatasi karakter deskripsi

Screenshot

5. var newestFlags
Pilihan yang bisa digunakan

var newestFlags = number;     
//jumlah "NEW!" yang muncul pada postingan baru

Screenshot

6. var numDisplay
Pilihan yang bisa digunakan

var numDisplay = number;     //membatasi index posting
var numDisplay = 'All';      //menampilkan semua index posting

DEMO numDisplay 18 || DEMO numDisplay All

7. var adjacents
Pilihan yang bisa digunakan

var adjacents = number;     
//digunakan pada navigasi halaman

Screenshot

8. var exception
Pilihan yang bisa digunakan

var exception = true or false;     
//var labels harus di set ke spesifik
//bila di set true, menampilkan label selain yang ada di var labels
//bila di set false, menampilkan label yang ada di var labels

DEMO exception true || DEMO exception false

9. var slwep
Pilihan yang bisa digunakan

var slwep = true or false;     
//slwep adalah kependekan dari Show Labels With Empty Post
//var labels harus di set ke spesifik
//bila di set true, menampilkan label yang punya 0 posting
//bila di set false, hanya menampilkan label yang memiliki posting

DEMO slwep true || DEMO slwep false

10. var incLabelAll
Pilihan yang bisa digunakan

var incLabelAll = true or false;     
//label 'All' adalah label khusus yang digunakan untuk menampilkan semua posting
//bila di set true, menampilkan label 'All'
//bila di set false, tidak menampilkan label 'All'

DEMO incLabelAll true || DEMO incLabelAll false

Fitur-fitur tambahan:
1. Pencarian Judul Posting
2. Bila Anda klik pada bagian Title, Published, dan Last Update, akan mengurutkan data secara bergantian
3. Bisa menampilkan lebih dari 500 postingan, namun semakin banyak posting semakin lama proses yang dikerjakan