Widget Daftar Isi Tabulasi untuk Blogger

Berikut ini adalah sebuah widget daftar isi blog berbentuk tabulasi. Terdiri dari dua sisi berupa daftar kategori dan daftar posting. Setiap nama kategori akan menjadi tab, sedangkan daftar posting akan menjadi konten tab yang akan muncul setiap kali tab diklik:

Integrasi Widget ke Blogger

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

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<style type="text/css">
#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;
}
</style>
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://nama_blog.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 50,
    showThumbnails: false,
    thumbSize: 40,
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    monthNames: ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"],
    newTabLink: true,
    maxResults: 99999,
    preload: 0,
    sortAlphabetically: true,
    showNew: 7,
    rmoreText: "Selengkapnya &#9658;",
    newText: " - <em style='color:red;'>New!</em>"
};
</script>
<script src="http://externalproject.googlecode.com/svn/trunk/eks/js/toc.v1.js"></script>

Ganti URL yang Saya beri tanda dengan alamat blog Anda kemudian klik Publikasikan.

Pengaturan Lanjutan