Pembaharuan 29 Maret 2013: Menambahkan opsi thumbSize
, noThumb
, sortAlphabetically
, showNew
dan newText
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:
Integrasi Widget ke Blogger
Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:
Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik 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)
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>
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). |
thumbSize | Digunakan untuk menentukan ukuran thumbnail. |
noThumb | URL gambar cadangan untuk posting yang tidak memiliki gambar di dalamnya. |
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. |
sortAlphabetically | false untuk menyortir posting secara normal berdasarkan bulan terbit, true untuk menyortir posting berdasarkan alfabet. |
showNew | false untuk menyembunyikan tanda New!. Ganti dengan angka untuk menentukan berapa banyak posting terbaru yang ingin ditandai dengan label New!. |
newText | Markup HTML bebas untuk membuat label New! pada posting-posting terbaru. |
0 komentar:
Posting Komentar