Berikut ini adalah versi daftar isi dalam bentuk tabel yang memiliki kemampuan untuk menyortir berdasarkan Abjad dan Label. Saya mendapatkan kode ini dari Threelas kemudian memodifikasinya untuk meringkas kode-kode yang tidak perlu:


Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<style type="text/css">
#tocTable {
  border:2px solid white;
  font:normal 11px Verdana,Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse;
  text-align:left;
}

#tocTable th, #tocTable td {
  border:1px solid white;
  background-color:#fafafa;
  padding:10px 15px;
}

#tocTable th {
  background-color:#5d5d5d;
  font-weight:bold;
  color:white;
  text-shadow:0px 1px 0px rgba(0,0,0,0.3);
}

th#th1         {width:60%;background-color:#5A930D;}
th#th2, th#th3 {width:20%;}

#tocTable td.toc-header-col1,
#tocTable td.toc-header-col2 {padding:0px 0px !important;background-color:#2372A7;}
#tocTable td.toc-header-col3 {background-color:#D7DEF0;}

#tocTable a {
  display:block;
  text-decoration:none;
  color:white;
  padding:10px 15px;
  background:transparent;
}

#tocTable td.toc-header-col1:hover,
#tocTable td.toc-header-col2:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0px 0px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 3px rgba(0,0,0,0.4);
}

select#tocSort {
  width:200px;
  border:1px solid #ccc;
  display:block;
  margin:0px 0px 7px 0px;
}
</style>
<script type="text/javascript">
var numberpost   = 999, // Tentukan jumlah maksimal posting
    theOption    = "Opsi...",                  // Label opsi 1
    theSortPost  = "Sortir berdasarkan Abjad", // Label opsi 2
    theSortLabel = "Sortir berdasarkan Label", // Label opsi 3
    theJudul     = "Judul Artikel",  // Header tabel 1
    theLabel     = "Label Artikel",  // Header tabel 2
    theDate      = "Bulan Terbit",   // Header tabel 3
    blankLabel   = "Tak Berlabel",   // Label kosong
    yoursite     = "http://hompimpaalaihumgambreng.blogspot.com"; // URL blogmu
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/toctablesort-v1.js"></script>

Ganti URL http://hompimpaalaihumgambreng.blogspot.com dengan alamat blogmu, lalu Simpan dan Terbitkan.