Membuat Daftar isi Tabulasi

Ketika saya blogwalking saya ketemu dengan cara pembuatan Daftar isi Dengan Tabulasi, karya seorang master blog Beliau adalah Mas Taufik Nurrohman dalam Blognya http://www.dte.web.id  ( Semoga sang master diberikan umur panjang serta kesehatan, amiin ).
hal ini sangat menarik bagi saya, dikarenakan ada beberapa template yang kurang support dengan penggunaan daftar isi dengan accordion mungkin bagi sobat blogger yang mengalami hal tersebut. Daftar isi Tabulasi ini dapat menjadi solusi bagi sobat blogger semuanya.

Freview dari bentuk aslinya

 Freview hasil sedikit midifikasi untuk penyesuaian dengan warna blog ini


Untuk penerapannya sebagai berikut :
1. Seperti biasa Login dulu ke akun Blogger sobat
2. Kemudian klik "Buat Entri Baru"
3. Klik HTML jangan Compose
4. Kopi Paste Kode Dibawah ini ( Pilih Salah Satu Saja )

KODE ASLI WARNA HIJAU :
<link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<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://nama_blog.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)
    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 posts result
    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>



KODE UNTUK WARNA BIRU ALA KOLOM TUTORIAL™
<style type="text/css">
  /* Skin for Blogger Tabbed Layout TOC */

#tabbed-toc {
  margin:0 auto;
  background-color:#0D0F96;
  -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:25%;
  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:#2B67DE;
  color:white;
}

#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#428AD1;
  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:75%;
  float:right;
  background-color:white;
  border-left:5px solid #428AD1;
  -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:#1A1C9E;
  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:#A9C8F4;
}

#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;
  }
}
</style>
<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<a href="http://joens-tutorial.blogspot.com/2013/01/membuat-daftar-isi-tabulasi.html" style="display: block; font: normal bold 8px Arial,Sans-Serif; margin: 10px; text-align: right; text-decoration: none;" title="Tabbed TOC">Kolom Tutorial™</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://nama_blog.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)
    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 posts result
    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>


Note :
Ganti Link http://nama_blog.blogspot.com  Dengan alamat blog sobat

Sumber Referensi : Mas Taufik Nurohman

Berlangganan update artikel terbaru via email:

4 Responses to "Membuat Daftar isi Tabulasi"

  1. siip gan infonya...trimakasih..

    ReplyDelete
    Replies
    1. Terimakasih banyak mas atas kunjungannya,,,,,

      masih newbie mas....

      Delete
  2. gan kalo mo ganti warna background, ukuran font jg lebar kolom gimana??

    ReplyDelete
    Replies
    1. Untuk Background Edit :
      background-color:#0D0F96;
      background-color:#2B67DE;
      background-color:#428AD1;

      Untuk Lebar Sesuaikan :
      width:25%;
      width:75%;
      ( Nominal keduanya harus 100% )

      Kode warna :
      http://joens-tutorial.blogspot.com/2012/11/kode-warna-html_18.html

      Delete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel