JSFiddle: Daftar Isi Tabulasi (Simple)

https:////example.com/style.css X

#tabbed-toc {
  margin:5px auto 0;
  background-color:#292929;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  overflow:hidden;
  position:relative;
  color:#888;
}
#tabbed-toc .loading {margin:20px 47%;}
#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;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#ccc;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 10px;
  margin:0 5px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#222;
  color:white;
  padding:0 20px;
  margin:0 -5px;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#3c3c3c;
  color:#C4DEF0;
  font-size:13px;
  font-weight:bold;
  border-top:1px solid #444;
  border-bottom:1px solid #444;
  border-right:1px solid #222;
  -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;
  padding:0 15px;
  margin:-1px -1px 0 0;
}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:#333;
  border-left:1px solid #222;
  border-right:1px solid #444;
  -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/normal Helmet,Freesans,Sans-Serif;
  border-bottom:1px solid #444;
}
#tabbed-toc .panel li a.item-title {
  display:block;
  position:relative;
  font-weight:normal;
  font-size:13px;
  color:#999;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  line-height:28px;
  height:28px;
  padding:0 12px;
  text-transform:uppercase;
  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.bold time {float:left;}
#tabbed-toc .panel li .summary {
  display:block;
  height:50px;
  padding:10px 12px 10px;
  font-style:italic;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  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 #3c3c3c;
  background-color:#292929;
}
#tabbed-toc .panel li.bold {
  float:left;
  width:50%;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus {
  color:#999;
  outline:none;
  background-color:#3c3c3c;
  border-left:4px solid #066696;
}
#tabbed-toc .panel li.bold a.item-title:hover {
  background-color:#3c3c3c;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc .panel li .itemfoot {
  clear:both;
  padding:5px 10px;
  color:#666;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
  position:relative;
}
#tabbed-toc .panel li .itemfoot a.itemrmore {
  font-weight:bold;
  color:#3B5998;
  text-decoration:none;
  position:absolute;
  top:5px;
  right:10px;
}
#tabbed-toc .panel li .itemfoot a.itemrmore:hover {
  color:#555;
  background-color:transparent;
  text-decoration:none;
  border-color:transparent;
}

https:////example.com/script.js X

var tabbedTOC = {
    blogUrl: "https:////js-fiddle.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: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // 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
};
var h = document.getElementsByTagName('body')[0],
    s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://cdn.statically.io/gh/idtutorplus/JSFiddle/b516bcee/js/toc.v1.js';
h.appendChild(s)