Widget Daftar Isi Tabulasi untuk Bogger

Rabu, 31 Oktober 2012

Diposting oleh: Taufik Nurrohman

Berikut ini adalah sebuah widget daftar isi blog berbentuk tabulasi. 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:

Lihat Demo Unduh CSS Unduh JavaScript

Integrasi Widget ke Blogger

Pertama-tama 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 di bawah ini kemudian letakkan di dalam formulirnya:

<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)
    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 type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Ganti URL yang Saya beri tanda dengan alamat blog Anda kemudian klik Publikasikan.

Pengaturan Lanjutan

Opsi	Keterangan
blogUrl	Ganti nilainya dengan alamat blog Anda.
containerId	ID elemen yang akan digunakan sebagai penampung JSON yang sudah diproses (abaikan jika tidak perlu).
activeTab	Digunakan untuk menentukan nomor urut tab yang aktif (nilai 1 akan membuat tab di urutan pertama menjadi aktif, begitu pula konten tab pertama juga akan terbuka saat pertama kali halaman diakses).
showDates	Ganti nilainya menjadi true untuk menampilkan waktu terbit posting.
showSummaries	Ganti nilainya menjadi true untuk menampilkan ringkasan posting.
showThumbnails	Ganti nilainya menjadi true untuk menampilkan thumbnail posting (tidak direkomendasikan karena akan membuat halaman lama termuat).
monthNames	Digunakan untuk menentukan nama-nama bulan sesuai dengan sistem penanggalan di negara tempat Anda tinggal.
newTabLink	Jika bernilai true, semua tautan akan membuka di tab/jendela baru saat diklik.
maxResults	Jumlah maksimal posting yang akan ditampilkan.
preload	Digunakan untuk menentukan waktu penundaan pemuatan JSON. Gunakan satuan milidetik atau cukup tuliskan "onload" agar widget ini memuat setelah keseluruhan halaman telah selesai termuat.