Membuat Widget Daftar Isi Tabulasi untuk Blogger

Membuat Widget Daftar Isi Tabulasi untuk Blogger

Membuat Widget Daftar Isi Tabulasi untuk Blogger - Daftar isi dalam Web Atau Blogger Memang tak lepas dari sebuah menu pendukung dalam sebuah Blo karna dapat mempermudah para pengguna internet jika mencari sebuah artikel di sebuah blog, Pada artikel sebelumnya saya sudah share tentang Memasang Tampilan Persentase Scroll di Blogger , Daftar isi ini Terdiri dari dua sisi berupa daftar kategori dan daftar posting. Setiap nama kategori akan menjadi tab, sedangkan daftar posting akan menjadi konten tab yang akan muncul setiap kali tab diklik. Langsung aja neh Caranya !!!

Memasang Witget ini Di Blogger

• Klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong

Menambahkan halaman statis baru

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

Pilih mode HTML

• Salin Kode ini di laman HTML terserbut, kemudian klik simpan dan lihat hasilnya.

<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://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: "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>

• Jika Membutuhkan File CSS dan JS, bisa Download filenya di bawah ini.

Download File CSS
click to begin
CSS

Download File JS
click to begin
JS