Berikut ini ialah versi daftar isi dalam bentuk tabel yang mempunyai kemampuan untuk menyortir menurut huruf dan label. Saya mendapat isyarat 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 hidangan Laman pada sidebar. Kemudian, pada hidangan Laman Baru pilihlah Laman Kosong:
Setelah itu Anda akan melihat formulir halaman statis menyerupai ini. Klik mode HTML:
Salin isyarat di bawah ini kemudian letakkan di dalam formulirnya:
<style> #tocTable { border:2px solid white; font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif; color:#333; border-collapse:collapse; text-align:left; margin:0 0 5px; } #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:0 1px 0 rgba(0,0,0,.3); } #th-1 { width:60%; background-color:#5A930D; } #th-2,#th-3 {width:20%} #tocTable td.toc-header-col-1, #tocTable td.toc-header-col-2 { padding:0 !important; background-color:#2372A7; } #tocTable td.toc-header-col-3 {background-color:#D7DEF0} #tocTable a { display:block; text-decoration:none; color:white; padding:10px 15px; background:none; } #tocTable td.toc-header-col-1:hover, #tocTable td.toc-header-col-2:hover { background-color:#174B6F; -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4); -moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4); box-shadow:inset 0 0 3px rgba(0,0,0,.4); } #tocSort { display:block; width:220px; font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif; color:#333; cursor:pointer; border:none; outline:none; background-color:#eee; margin:0 0 2px 0; padding:5px; } </style> <script> var theTotalPosts = 9999, // Tentukan jumlah maksimal posting theOptions = "Sortir...", // Label opsi 1 theSortPosts = "Sortir menurut Abjad", // Label opsi 2 theSortLabels = "Sortir menurut Label", // Label opsi 3 theTitles = "Judul Artikel", // Header tabel 1 theLabels = "Label Artikel", // Header tabel 2 theDates = "Bulan Terbit", // Header tabel 3 theBlankLabels = "Tak Berlabel", // Label kosong theSiteUrl = "http://nama_blog.blogspot.com"; // URL blog kau </script> <script src="//dte-project.googlecode.com/svn/trunk/toc-table-sort.js"></script>Ganti URL http://nama_blog.blogspot.com dengan alamat blogmu, kemudian simpan dan terbitkan. Sumber https://www.dte.web.id/