Membuat Daftar isi Tabulasi

Ketika saya blogwalking saya ketemu dengan cara pembuatan Daftar isi Dengan Tabulasi, karya seorang master blog Beliau adalah Mas Taufik Nurrohman dalam Blognya http://www.dte.web.id ( Semoga sang master diberikan umur panjang serta kesehatan, amiin ).
hal ini sangat menarik bagi saya, dikarenakan ada beberapa template yang kurang support dengan penggunaan daftar isi dengan accordion mungkin bagi sobat blogger yang mengalami hal tersebut. Daftar isi Tabulasi ini dapat menjadi solusi bagi sobat blogger semuanya.

Freview dari bentuk aslinya

Freview hasil sedikit midifikasi untuk penyesuaian dengan warna blog ini

Untuk penerapannya sebagai berikut :

1. Seperti biasa Login dulu ke akun Blogger sobat

2. Kemudian klik "Buat Entri Baru"

3. Klik HTML jangan Compose

4. Kopi Paste Kode Dibawah ini ( Pilih Salah Satu Saja )

KODE ASLI WARNA HIJAU :

KODE UNTUK WARNA BIRU ALA KOLOM TUTORIAL™

}

#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}

@media (max-width:700px) {
#tabbed-toc {
    border:2px solid #333;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
}
#tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
}
#tabbed-toc .toc-content {
    border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
    display:none;
}
}
</style>
<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<a href="http://joens-tutorial.blogspot.com/2013/01/membuat-daftar-isi-tabulasi.html" style="display: block; font: normal bold 8px Arial,Sans-Serif; margin: 10px; text-align: right; text-decoration: none;" title="Tabbed TOC">Kolom Tutorial™</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)
    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 posts result
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>

Note :

Ganti Link http://nama_blog.blogspot.com Dengan alamat blog sobat

Sumber Referensi : Mas Taufik Nurohman