Widget Daftar Isi Keren

http://astinquery.blogspot.com/2014/08/membuat-daftar-isi-keren-pada-blog.html

by astin query

HTML

<div id="table-outer">
    <select id="orderFeedBy">
        <option value="published" selected>POSTING TERBARU</option>
        <option value="updated">POSTING DIPERBAHARUI</option>
    </select><span id="resultDesc"></span>
    <form id="postSearcher">
        <input type="text" id="feed-q-box" value="" autocomplete="off" onkeyup="resetField();" />
    </form>
</div>
<div id="tabbed-toc"><span id="labelSorteres"><div id="loadCat"></div><div id="labelSorter"><li class="toc-tab-item"><a class="allowed" href="javascript:changeSort(0);">SEDANG MEMUAT LABEL...</a></li></div></span>
    <div class="feedline">
        <ul id="feedContainer"></ul>
        <div id="feedNav"></div>
    </div>
</div>

CSS

body {
    margin:0;
    padding:10px;
    background-color: #333;
}
#resultDesc {
  margin:0;
  padding:0 0;
  color:#999;
  font-weight:bold;
}
#resultDesc span {
  margin:0 auto;
  padding:5px 10px 7px;
  color:#D64D52;
}
#feedNav,#feedNav:hover {
  margin:0 auto;
  height:34px;
  line-height:34px;
  text-align:center;
  color:#fff;
  font:bold 12px/30px Arial,Sans-Serif;
  background-color:#3c3c3c;
  border-top:1px solid #444;
  -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;
}
#feedNav a,#feedNav span {
  color:#999;
  padding:0;
  text-decoration:none;
}
#feedNav:hover {
  color:white;
  background-color:#444;
}
#feedNav:active {background-color:#527915;}
#feedNav span {cursor:wait;}
#table-outer {
  height:30px;
  text-align:center;
  padding:0;
  margin:15px 20px 0;
}
#table-outer #orderFeedBy {float:left;}
#table-outer #postSearcher {float:right;}
#table-outer input {
  display:inline-block;
  vertical-align:right;
  margin:0 2px 0 0;
  padding:0 0;
}
#table-outer select[disabled] {opacity:.4;}
#postSearcher input,#table-outer select {
  width:33%;
  background-color:#111;
  border:none;
  padding:5px 5px;
  font:normal normal 10px Tahoma,Verdana,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#777;
  outline:none;
  -webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  box-shadow:inset 0 1px 3px black,0 1px 0 #444;
}
#postSearcher {
  width:33%;
  padding:0;
}
#postSearcher input {
  width:96%;
  padding:5px 5px;
}
#postSearcher input:focus,#table-outer select:focus {background-color:#090909;}
#tabbed-toc {
  width:100%;
  margin:5px auto 0;
  background-color:#333;
  border-left:1px solid #222;
  border-right:1px solid #444;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  overflow:hidden;
  position:relative;
  color:#888;
}
#tabbed-toc .loading...

JavaScript

var tocConfig = {
    url: "http://astinquery.blogspot.com",
    feedNum: 12,
    numChars: 100,
    thumbWidth: 40,
    newTabLink: true,
    showDates: true,
    labelName: false,
    showSummaries: true,
    showThumbnails: true,
    navText: "Berikutnya &#9660;",
    frontText: "Kembali ke Awal &uArr;",
    moreText: "Selengkapnya &#9658;",
    loading: "<span>Memuat Content...</span>",
    searching: "<span>Mencari...</span>",
    noResult: "Tak Ditemukan",
    Created: "Get Widget",
    loadCat: "Sedang Memuat Label...",
    resetCat: "Reset Ulang Category...",
    noImage: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",
    monthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"]
};

var b = document.getElementsByTagName('body')[0],
    s = document.createElement('script');
    s.type = "text/javascript";
    s.src = "http://externalproject.googlecode.com/svn/trunk/eks/js/tocConfig.js";
    b.appendChild(s);