Daftar Isi Tabulasi untuk Blog

Wednesday, October 8, 2014

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:

Menambahkan halaman statis baru

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: "https://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="https://cekidot.96.lt/file/js/toc.v1.js"></script>

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

Lebih Lanjut

Pengaturan Lanjutan

Opsi	Keterangan
blogUrl	Ganti nilainya dengan alamat blog Anda.
containerId	ID elemen yang akan digunakan sebagai penampung JSON yang sudah diproses (abaikan jika tidak perlu).
activeTab	Digunakan untuk menentukan nomor urut tab yang aktif (nilai 1 akan membuat tab di urutan pertama menjadi aktif, begitu pula konten tab pertama juga akan terbuka saat pertama kali halaman diakses).
showDates	Ganti nilainya menjadi true untuk menampilkan waktu terbit posting.
showSummaries	Ganti nilainya menjadi true untuk menampilkan ringkasan posting.
showThumbnails	Ganti nilainya menjadi true untuk menampilkan thumbnail posting.
thumbSize	Digunakan untuk menentukan ukuran thumbnail.
noThumb	URL gambar cadangan untuk posting yang tidak memiliki gambar di dalamnya.
monthNames	Digunakan untuk menentukan nama-nama bulan sesuai dengan sistem penanggalan di negara tempat Anda tinggal.
newTabLink	Jika bernilai true, semua tautan akan membuka di tab/jendela baru saat diklik.
maxResults	Jumlah maksimal posting yang akan ditampilkan.
preload	Digunakan untuk menentukan waktu penundaan pemuatan JSON. Gunakan satuan milidetik atau cukup tuliskan "onload" agar widget ini memuat setelah keseluruhan halaman telah selesai termuat.
sortAlphabetically	false untuk menyortir posting secara normal berdasarkan bulan terbit, true untuk menyortir posting berdasarkan alfabet.
showNew	false untuk menyembunyikan tanda New!. Ganti dengan angka untuk menentukan berapa banyak posting terbaru yang ingin ditandai dengan label New!.
rmoreText	Selengkapnya ► text yang digunakan untuk menyatakan baca selengkapnya atau read more, anda dapat merubah textnya sesuka anda.
newText	Markup HTML bebas untuk membuat label New! pada posting-posting terbaru.

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini