Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog

YANG dimaksud Daftar Isi Tabulasi adalah daftar isi berbentuk tabel seperti ilustrai gambar di samping. Contoh atau demonya bisa dilihat di Sitemap Versi 1 punya CB di Top Menu. Keren 'kan?

Tipe atau bentuk daftar isi berupa tabulasi ini dibagi oleh DTE. Anda bisa kunjungi langsung ke sana untuk mendapatkan kodenya, lengkap dengan kode CSS dan Javascript yang bisa diunduh.

Sebelumnya, CB sudah share tentang cara membuat daftar isi blog yang bentuknya sederhana, per kategori, seperti di Sitemap Versi 2.

Anda tinggal pilih, mau sitemap berupa tabulasi atau daftar isi "konvensional". CB sih bikin dua-duanya, namanya juga Contoh Blog (CB), jadi nyontohin dong :)

Cara Membuat Daftar Isi (Sitemap) Tabulasi

1. Page > New Page
2. Isi kolom judul dengan Daftar Isi atau Sitemap
3. Pilih mode HTML

4. Copy & Paste Kode Berikut ini di kolom konten. Ganti alamat blognya dengan alamat blog Anda.

<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css"/>
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://contohblognih.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>

5. Klik "Publish!

Selamat, kini blog Anda sudah dilengkapi Peta Situs (Sitemap), Table of Content (TOC), alias Daftar Isi sebagai menu, navigasi, sekaligus internal link blog Anda!

Lihat DEMO

Itu dia Cara Membuat Daftar Isi (Sitemap) Tabulasi untuk Blog platform Blogspot. Good Luck!