Cara Membuat Daftar Isi Blog Terbaru Sahil 2015

Sobat mulia.Sudah beberapa saat Ane rehat dalam menulis di blog Sahil. Pada kesempatan ini, awalan tahun 2015 ini saya mulai dengan beberapa tulisan kecil yang tentunya semoga dapat membantu rekan-rekan "blogger" dalam mempercantik blognya. Tidak lain untuk menjadikan para "follower" dan "gues" bisa lebih betah dan berselancar ria di blog kita. Wah, kok malah ribet ini, hehe. Langsaung saja, kita mulai dengan "Cara Membuat Daftar Isi Terbaru Sahil 2015".

Cara Membuat Daftar Isi Terbaru Sahil 2015

Apa sih pentingnya daftar isi atau dalam bahasa blogger yang lebih kita mudah kita kenal adalah "sitemap". Sitemap atau daftar isi adalah gambaran secara umum yang terdapat pada suatu blog atau web. Itu artinya, tingkat kepuasan pengunjung dalam hal kemudahan,salah satunya akan ditentukan oleh seberapa mudah mudah para pengunjung dalam mencari judul artikel yang terdapat dalam web atau blog kita, bisa menggunakan "keyword" atau kata. Namun, apabila penulis sudah menyediakan "ruang" atau "link" khusus untuk hal itu, maka itulah yang dinamakan dengan "Sitemap" atau "daftar isi". Salah satu contohnya dalam blog ini pula (walau dengan tampilan berbeda). Silakan lihat contoh daftar isi blog ini (clik di sini).

Pada kesempatan ini, saya tuliskan kode html untuk tampilan "sitemap" atau daftar isi yang berbeda dengan tutorial sebelumnya dalam blog Sahilluqman. Cara ini saya peroleh dari Senior blogger saya, berikut linknya. Caranya akan sama persis dalam tutorial sebelumnya, namun dengan mengganti kode htmlnya. Masih bingung, baiklah kita mulai dari awal kembali.

Cara Membuat Daftar Isi Tampilan Tabel

1. Masuk pada akun blogger Sobat sendiri-sendiri.

2. Klik akun sobat, dan pilih opsi menulis artikel baru atau "compose" (Page > New Page)

3. Pilih opsi Html (di samping opsi Compose)

4. Copy pastekan kode html berikut pada halaman opsi (3) di atas. Jangan lupa mengganti nama blog sobat (alamat web atau blog sobat- yang saya beri warna biru).

<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://sahilluqman.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>
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>