Cara Memasang Daftar Isi Sitemap

Cara Memasang Daftar Isi Sitemap - Daftar isi adalah sebuah rangkuman daftar yang berisi tentang isi dari suatu data, seperti daftar isi blog, daftar isi buku.
Namun yang akan dibahas disini adalah daftar isi blog atau biasa sering disebut Sitemap (peta situs). Fungsi daftar isi blog untuk memudahkan pengunjung mencari atau melihat tentang isi blog secara keseluruhan.

Kenapa gak memakai kotak pencarian saja?? Kotak pencarian lebih di fungsikan untuk mencari kata kunci tertarget yang pengunjung butuhkan. Sebelum sobat memasang di blog bisa lihat dulu demonya.

Demo Widget Daftar Isi

Berikut cara memasang daftar isi sitemap di blog:

1. Login blogger.com

2. Masuk ke menu pilih Template >> Edit HTML

3. Cari kode ]]></b:skin> dan copy paste kode berikut di atas kode ]]></b:skin> (gunakan CTRL+F untuk memudahkan pencarian)

#tabbed-toc {margin:0 auto;background-color:#BD5D48;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333;}
#tabbed-toc .loading {display:block;padding:5px 10px;font:normal bold 10px Arial,Sans-Serif;color:white;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {margin:0 0;padding:0 0;list-style:none;}
#tabbed-toc .toc-tabs {width:22%;float:left;}
#tabbed-toc .toc-tabs li a {display:block;font:normal bold 10px/28px Arial,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {background-color:#9a3b26;color:white;}
#tabbed-toc .toc-tabs li a.active-tab {background-color:#9a5546;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
#tabbed-toc .toc-content, #tabbed-toc .divider-layer {width:78%;float:right;background-color:white; border-left:5px solid #9a5546;-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing:border-box;}
#tabbed-toc .divider-layer {float:none;display:block;position:absolute;top:0; right:0;bottom:0; -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7);}
#tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif;}
#tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:11px; color:#892412;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden;}
#tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
#tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden;}
#tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
#tabbed-toc .panel li:nth-child(even) {background-color:#FFE8E3;}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a {background-color:#333;color:white;outline:none;}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {background-color:#222;}
@media (max-width:700px) {
#tabbed-toc {border:2px solid #333;}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content {overflow:hidden; width:auto;float:none; display:block;}
#tabbed-toc .toc-tabs li {display:inline;float:left;}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab {background-color:#224C19;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4);}
#tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
#tabbed-toc .toc-content {border:none;}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time {display:none;}
}

4. Simpan template dengan mengklik tombol Save Template atau Simpan Template.
5. Buat halaman statis atau postingan baru dan copy paste kode berikut di halaman statis atau postingan dalam mode HTML bukan Compose, lalu publish atau terbitkan.

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

Pengaturan:

blogUrl : Ganti dengan alamat blog Anda.
activeTab : Nilai 1 akan membuat tab di urutan pertama menjadi aktif, konten tab pertama akan terbuka saat pertama kali halaman diakses.
showDates : Nilainya true untuk menampilkan waktu terbit postingan.
showSummaries : Nilainya true untuk menampilkan ringkasan posting.
showThumbnails : Nilainya true untuk menampilkan thumbnail (tidak direkomendasikan karena akan membuat halaman lama termuat).
thumbSize : Untuk menentukan ukuran thumbnail.
noThumb : URL gambar cadangan untuk posting yang tidak memiliki gambar di dalamnya.
monthNames : Menentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Asal.
newTabLink : Nilainya 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 : Nilai false untuk menyortir posting secara normal berdasarkan bulan terbit, true untuk menyortir posting berdasarkan alfabet.
showNew : Nilai false untuk menyembunyikan label New! pada artikel baru. Ganti dengan angka untuk menentukan berapa banyak posting terbaru yang ingin ditandai dengan label New!.
newText : Markup HTML bebas untuk membuat label pada posting-posting terbaru (misalnya New! atau Terbaru!).

Semoaga Tutorial widget Cara Memasang Daftar Isi Sitemap dapat bermanfaat untuk sobat semua. Berikan komentar jika ada pertanyaan mengenai artikel ini. Terima kasih :)