Cara Membuat Daftar Isi Model Tabulasi

Cara Membuat Daftar Isi Model Tabulasi - setelah lama tidak posting, kali ini saya akan share javascript untuk membuat daftar isi model tabulasi yg keren :). Daftar isi adalah tempat dari seluruh artikel blog dan dijadikan dalam 1 halaman. Daftar isi sangat berguna pada blog, karena membantu pengunjung untuk mencari artikel artikel / konten yg mereka inginkan. script yg saya dapatkan kali ini yaitu dari DTE.

Untuk tutorial kali ini, saya akan menyajikan sebuah Daftar Isi Unik dengan sistem Tabulasi, mudah dalam pemasangan (tanpa melakukan edit html), tampilan menarik, ringan (friendly) serta memberikan nuansa yang agak sedikit menonjol.

oke dibawah ini ada model-model daftar isi, antara lain :

Cara Membuat Daftar Isi Keren Berdasarkan Label

Cara Membuat Daftar Isi Melayang di Blog

Cara Membuat Daftar Isi Otomatis di Blog

Cara Membuat Daftar Isi Model Tabulasi :
1. Buka Blogger

2. Pada dashboard, klik Laman -> Laman baru -> pilih Laman Kosong

3. lalu akan ada COMPOSE dan HTML, sobat klik HTML

4. lalu copy dan paste kode dibawah ini

<link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://hompimpaalaihumgambreng.blogspot.com/2012/10/widget-daftar-isi-tabulasi-untuk-bogger.html" title="Tabbed TOC">DTE :]</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://nama_blog.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: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // 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 type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>

5. Kemudian beri judul daftar isi / sitemap

6. publikasikan

ganti yg warna merah dgn url blog kalian