Cara Membuat Daftar Isi Keren Model Tabulasi Terbaru

Cara Membuat Daftar Isi Keren Model Tabulasi Terbaru - Hari ini saya akan kembali membahas mengenai Trik Blogger, dimana sebelumnya sudah dibahas mengenai Cara Ampuh Mengatasi Peringatan: Missing required field "updated".

Daftar Isi pada Web/Blog disebut sebagai Sitemap atau Table Of Content (TOC) yang berfungsi merangkum semua artikel-artikel yang telah di posting baik itu menurut label atau tanggal/bulan/tahun. Daftar Isi juga berguna untuk memudahkan para pengunjung guna menemukan artikel-artikel yang mereka cari. 

Disini saya akan membahas tentang bagaimana Cara Membuat Daftar Isi Keren Model Tabulasi Terbaru dengan tampilan yang menarik, keren, ringan, dan juga sangat mudah dalam pemasangannya. Untuk itu langsung saja silahkan dilihat tutorialnya di bawah.

Contoh

Langkah-langkah :

• Memasang Daftar Isi Pada Laman Blog

1. Login ke Blog
2. Buat Laman baru

3. Copy kode di bawah dan pastekan pada tab Html pada laman tersebut

<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>

<br />
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://sotosop-tutorial.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 src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>

Keterangan :

• 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

Langkah diatas jika anda ingin menempatkan daftar isi pada laman blog, dan anda juga bisa menempatkannya pada widget blog

• Memasang Daftar Isi didalam Widget Blog

1. Login ke Blog
2. Pada Dasboard blog pilih Tata Letak - Add Gadget - HTML/Javascript
3. Lalu Pastekan kode diatas pada kolom HTML tersebut
4. Simpan

• Memasang Daftar Isi Pada Dropdown Menu

Anda juga bisa menempatkanya pada menu dropdown pada blog anda dengan cara:

1. Login ke Blog
2. Pada Dasboard blog pilih menu Laman, Pada Opsi 'tampilkan laman sebagai' pilih Jangan tampilkan

3. Klik Lihat untuk mengambil Url Daftar Isi tersebut

4. Copy Url Daftar Isi

5. Lalu pastekan pada Menu Dropdown di dalam template anda, klik Template - Edit HTML

6. Simpan Template

Judul: Cara Membuat Daftar Isi Keren Model Tabulasi Terbaru
Rating: 100% based on 99998 ratings. 34 user reviews.
Ditulis Oleh Adincuih