Membuat Daftar Isi Keren Pada Blog

Integrasikan widget ke blogger

Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Salin kode di bawah ini kemudian letakkan di dalam formulir HTMLnya:

<style type="text/css">
#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 {margin:20px 47%;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc #labelSorteres {
  width:20%;
  float:left;
  margin:0 auto;
}
#tabbed-toc #labelSorter ul {
  position:relative;
  margin-top:-36px;
  background-color:#333;
}
#tabbed-toc #labelSorter li a,#tabbed-toc #labelSorteres #loadCat li a {
  display:block;
  font:bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:34px;
  line-height:34px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#CCC;
  border-top:1px solid #444;
  border-left:1px solid #444;
  border-bottom:1px solid #222;
  border-right:1px solid #222;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 10px;
  margin:0;
  cursor:pointer;
}
#tabbed-toc #labelSorteres #loadCat .allowed,#tabbed-toc #labelSorter .allowed {cursor:not-allowed;}
#tabbed-toc #labelSorter li a:hover {
  outline:none;
  background-color:#3c3c3c;
  color:white;
}
#tabbed-toc #labelSorter li a.active-tab {
  color:#C4DEF0;
  font-size:13px;
  font-weight:bold;
  outline:none;
  z-index:1;
  padding:0 10px;
  margin:0;
  background-color:#3c3c3c;
}
#tabbed-toc #labelSorter li a.active-tab:hover {cursor:not-allowed;}
#tabbed-toc #labelSorter .disabled,#tabbed-toc #labelSorter .disablet {display:none;}
#tabbed-toc .feedline {
  width:80%;
  float:right;
  text-align:left;
  margin:0 auto;
  padding:0;
  background-color:#333;
  border-bottom:1px solid #222;
}
#tabbed-toc #feedContainer {background-color:#333;}
#tabbed-toc #feedContainer li {
  float:left;
  width:100%;
  margin:0 auto;
  list-style:none;
  background-color:#333;
  font:10px Helmet,Freesans,Sans-Serif;
  -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 #feedContainer li.bold {width:50%;}
#tabbed-toc #feedContainer li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc #feedContainer 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;
  height:34px;
  line-height:34px;
  padding:0 12px;
  text-transform:uppercase;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc #feedContainer li a.item-title:hover,#tabbed-toc #feedContainer li a.item-title:focus {
  color:#999;
  outline:none;
  border-left:4px solid #066696;
  -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 #feedContainer li .summary {
  display:block;
  height:50px;
  padding:10px 12px 10px;
  font-style:italic;
  color:#ccc;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
}
#tabbed-toc #feedContainer 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 #feedContainer li .itemfoot {
  clear:both;
  height:34px;
  line-height:34px;
  padding:0 10px;
  color:#666;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
  position:relative;
}
#tabbed-toc #feedContainer li .itemfoot a.itemrmore {
  float:right;
  font-weight:bold;
  color:#3B5998;
  text-decoration:none;
}
#tabbed-toc #feedContainer li .itemfoot a.itemrmore:hover {
  color:#555;
  background-color:transparent;
  text-decoration:none;
  border-color:transparent;
}
</style>
<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>
<script type="text/javascript">
var tocConfig = {
    url: "http://nama_blog.blogspot.com", // Ganti nilainya menjadi URL blog anda
    feedNum: 12, // Jumlah posting yang tampil
    numChars: 100, // Jumlah ringkasan posting
    thumbWidth: 40, // Ukuran thumbnail posting
    newTabLink: true, // Membuka link pada tab baru
    showDates: true, // Menampilkan tanggal publis
    labelName: false, // Menentukan label yang akan di tampilkan
    showSummaries: true, // Menampilkan ringkasan posting
    showThumbnails: true, // Menampilkan thumbnail posting
    navText: "Berikutnya &#9660;", // Memuat artikel lainnya
    frontText: "Kembali ke Awal &uArr;", // Artikel sudah mencapai batas
    moreText: "Selengkapnya &#9658;", // Readmore atau baca selengkapnya
    loading: "<span>Memuat Content...</span>", // Sedang memuat content
    searching: "<span>Mencari...</span>", // Sedang mencari content
    noResult: "Tak Ditemukan", // Content tidak di temukan
    loadCat: "Sedang Memuat Label...", // Memuat label
    resetCat: "Reset Ulang Category...", // Reset label
    noImage: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==", // Artikel tanpa gambar
    monthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"] // Bulan terbit artikel
};
</script>
<script src="http://externalproject.googlecode.com/svn/trunk/eks/js/tocConfig.js"></script>

Pengaturan