Cara Membuat Daftar Isi Model Tabulasi Keren

SF-87 ~ Hello sobat sf blog, balik lagi nih.. Anda sudah tentu sering mendengar, melihat dan membaca sebuah daftar isi baik itu pada buku, majalah atau bahkan pada website/blog. Nah, untuk Daftar isi sebuah blogspot biasa juga disebut sebagai Sitemap atau Table Of Content (TOC) yang berfungsi untuk merangkum semua artikel-artikel yang telah diposting baik itu menurut label atau tanggal/bulan/tahun dan juga berfungsi sebagai sistem navigasi dengan tujuan untuk memudahkan para pengunjung menemukan artikel-artikel yang mereka cari.

Untuk tutorial kali ini, saya akan menyajikan sebuah Daftar Isi Unik dengan sistem Tabulasi, mudah dalam pemasangan (tanpa melakukan edit html), tampilan menarik, ringan (friendly) serta memberikan nuansa yang agak sedikit menonjol jika dibandingkan dengan daftar isi yang lain.

Tampilan Daftar isi ini menampilkan label (kategory) disebelah kiri dan uraian yang berada disebelah kanan, serta bisa ditempatkan pada Laman ataupun widget dengan pengaturan-pengaturan yang tergolong mudah. Nah jika anda penasaran dengan daftar isi yang saya maksudkan disini, silahkan anda lihat gambarnya di bawah ini atau jika anda masih kurang puas, silahkan klik demo dan lihat sendiri perbedaannya.

DEMO

Setelah anda melihat dan merasakan perbedaannya, saya yakin anda pasti tertarik untuk menggunakannya dan mengganti yang sudah ada (lama) dengan daftar isi ini. Namun jika anda tidak tertarik, pilihannya hanya ada 2 yakni, lanjutkan membaca atau terus membaca artikel ini sampai habis (hehehe, sama aja dong kalau gitu...!!! sorry just kidding...!!!). Well untuk kode CSS, HTML, JavaScript beserta bagaimana cara pemasangannya, berikut ulasan lengkap beserta cara merubah tampilannya.

CSS, HTML, JavaScript dan Cara Pemasangan

Untuk penempatan daftar isi tabulasi ini (TOC), anda bisa menempatkan pada Postingan ataupun Widget Blogspot, namun saya sarankan lebih baik menempatkannya didalam postingan karena TOC ini cukup memakan banyak tempat.

1. Memasang Didalam Postingan Blog

Tugas pertama yang anda harus lakukan yakni login ke akun blogger anda
Selanjutnya buat sebuah postingan baru, baik itu pada halaman statis ataupun biasa dan kalau sudah terbuka, lihat pada sudut kiri atas. Disana terdapat 2 tab dimana yang satu bertuliskan "Compose" dan yang satunya lagi "HTML" dan sekarang klik bagian/tulisan HMTL Tersebut. Namun jika anda masih bingung, lihat gambar di bawah ini untuk lebih jelasnya.

Copy kode di bawah ini dan pastekan pada tab HTML yang sudah anda buka sebelumnya.

<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#8A94F0;
-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:#000;
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 12px Tahoma,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:20%;
float:left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Tahoma,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#000;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#C4C9F8;
color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#181D67;
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:80%;
float:right;
background-color:white;
border-left:5px solid #181D67;
-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 Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#051466;
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:#eee;
}
#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:#999;
color:none;
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;
}
}
</style>
<div id="tabbed-toc"><span class="loading">Loading...</span></div>

<a style="display:block;text-align:right;font:normal bold 8px Tahoma,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.lost-sector.net/2013/03/daftar-isi-tabulasi-untuk-blog.html" title="Tabbed TOC">Lsc</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://sf-87.blogspot.com",
containerId: "tabbed-toc",
activeTab: 1,
showDates: false,
showSummaries: false,
numChars: 200,
showThumbnails: false,
monthNames: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true,
maxResults: 99999,
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>

Code Source : www.dte.web.id/

Pengaturan :

Ganti URL berwarna biru di atas dengan URL blog anda
showDates: false : ganti menjadi true jika ingin menampilkan waktu postingan
showSummaries: false : ganti menjadi true jika ingin menampilkan ringkasan singat postingan
showThumbnails: false : ubah menjadi true jika ingin menampilkan gambar
newTabLink: true : ubah menjadi false jika anda ingin membuka link pada tab yang sama
maxResults: 99999 : adalah jumlah maksimal postingan yang ditampilkan

Setelah anda sudah merasa cukup melakukan pengaturanya, langkah selanjutnya adalah simpan atau pratinjau untuk melihat hasilnya.

2. Memasang Didalam Widget Blog

Login ke blogger
Pada menu dashboard, Pilih Tata Letak » Add Gadget » HTML/Javascript
Copy kode di atas dan pastekan kedalam kolom Gadget baru kemudian klik simpan dan relaoad blog/web anda dan lihat hasilnya.

Nah, demikian sedikit tips Cara Membuat Daftar Isi Model Tabulasi Keren ini , semoga bermanfaat..
Jika sobat mengalami kesuliatn atau ada yang mau di tanya, comment yah :)

Trima Kasih..
Salam Blogger ye :p

SF - 87

Pages