Gambar di samping adalah daftar isi model tabulasi yang dimiliki oleh portal berita kontan.co.id seperti yang terlihat bahwa daftar isi model tabulasi tersebut selain mempunyai tampilan yang cantik juga menghemat tempat sehingga cocok ditampilkan di dalam home page WebBlog dan bukan di halaman baru seperti daftar isi yang ada di blog ini.
Perlu kita flashback kembali bahwa daftar isi adalah sebuah bagian penting dari WebBlog yang berfungsi sebagai petunjuk untuk mencari sebuah artikel diantara seratus atau seribu artikel yang ada di dalam blog. Dan tingkat pentingnya ini setara dengan peta harta karun bajak laut yang digunakan untuk mencari harta karun yang tersebar di penjuru dunia.
Jika sobat blogger sudah tidak sabar dengan penjelasan diatas maka langsung saja disimak langkah-langkah membuat daftar isi blog model tabulasi berikut ini:
Cara Membuat Daftar Isi Blog Model Tabulasi
1. Log in kedalam akun blogger2. Pilih menu Laman >> Laman baru >> Laman kosong
3. Isikan judul
4. Klik mode HTML kemudian Copy-Paste kode JavaScript berikut 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">Loading...</span></div> <a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.tutorialblog46.blogspot.com/" title="Tabbed TOC">TutorialBlog46</a> <script type="text/javascript"> var tabbedTOC = { blogUrl: "http://your-URL", // 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 "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], 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>
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. |
5. Klik tombol [Pratinjau] untuk mereview terlebih dahulu kesesuaian kemudian tekan tombol [Publikasikan] jika sudah sesuai dan ingin ditampilkan di dalam blog
6. Selesai
Karena kita mempunyai beberapa alternatif cara untuk membuat daftar isi blog maka silahkan dipilih sesuai dengan kebutuhan. Akhir kata Saya ucapkan banyak terimakasih kepada saudara Taufik Nurrohman pengelola DTE atas kode JavaScript diatas.
Dan kami ucapkan terimakasih atas kunjungan dan perhatiannya atas tulisan yang berjudul cara membuat daftar isi blog model tabulasi berikut ini. Selamat mencoba dan Happy blogging.
Posting Komentar
Silahkan berkomentar untuk menyampaikan ASPIRASI Anda asal dengan cara SOPAN dan NO SPAM. Komentar yang tidak berkaitan dengan Topik pembahasan akan dihapus langsung oleh moderator.