Share By PalmaHutabarat Article By Lost Sector

1. Sitemap Tabulasi Version For Blogger HTML 2010
S h a r e A r t i c l e F r o m P a l m a H u t a b a r a t . c l a n . s u Page 1
Sitemap / Daftar isi
Version TABULASI
Anda sudah tentu sering mendengar, melihat dan membaca sebuah daftar isi baik itu pada buku,
majalah atau bahkan pada website/blog. Khusus daftar isi web/blog, 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. Selain itu, daftar isi 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.
Contoh Dari Gambar Dari TABULASI Ini Seperti Dibawah Ini
Cara Membuat Daftar Isi Tampilan Tabulasi Keren

2. Sitemap Tabulasi Version For Blogger HTML 2010
S h a r e A r t i c l e F r o m P a l m a H u t a b a r a t . c l a n . s u Page 2
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.
Cara Membuat Daftar Isi Tampilan Tabulasi Keren
*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;
}

3. Sitemap Tabulasi Version For Blogger HTML 2010
S h a r e A r t i c l e F r o m P a l m a H u t a b a r a t . c l a n . s u Page 3
#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);
}

4. Sitemap Tabulasi Version For Blogger HTML 2010
S h a r e A r t i c l e F r o m P a l m a H u t a b a r a t . c l a n . s u Page 4
#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,

5. Sitemap Tabulasi Version For Blogger HTML 2010
S h a r e A r t i c l e F r o m P a l m a H u t a b a r a t . c l a n . s u Page 5
#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>
<script type="text/javascript">
var tabbedTOC = {

6. Sitemap Tabulasi Version For Blogger HTML 2010
S h a r e A r t i c l e F r o m P a l m a H u t a b a r a t . c l a n . s u Page 6
blogUrl: "http://PalmaHutabarat.Clan.Su",
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>
Pengaturan :
Ganti URL berwarna Hijau Tua 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.
Karena Saya Hanya Bisa NGE Share Article Ini , Jadi Harap Kemakluman Nya .
Terimah kasih