Home / Tutorial Blogger

Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren

By Jhonarendra 6 comments
Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren. Widget daftar isi merupakan salah satu yang tidak boleh ditinggalkan. Karena, site map atau daftar isi dapat menginformasikan kepada pengunjung apa apa saja yang di posting oleh blog tersebut. Ya, sebab daftar isi menampilkan semua artikel secara kesluruhan. Tapi ada juga daftar isi yang hanya menampilkan beberapa artikel. Contohnya widget daftar isi berdasarkan satu label.

Daftar Isi Tampilan Tab

Widget daftar isi kini sudah banyak di share oleh para blogger. Jenisnya pun juga sudah banyak. Ada yang diurut berdasarkan tanggal, ada yang menurut abjad, widget daftar isi berdasarkan label, dan ada juga widget daftar isi tampilan tab yang keren. Kali ini saya akan bahas lebih lanjut mengenai Widget Daftar Isi Tampilan Tab yang Keren.

Seperti gambar di atas lah tampilan widget ini. Dikiri terdapat Tab Tab yang menampilkan label dari blog, dan di kanan menampilkan judul posting. Keunggulan dari tab ini, pengunjung dapat memilih kategori posting mana yang ingin dia lihat. Jika diklik, tanpa loading di kiri widget sudah muncul judul posting pada label yang dipilih.

Bagus kan? Lihat live demo nya di Site Map blog saya ini. Pada daftar isi, juga sudah saya tambahkan CSS berwarna biru. Supaya kelihatan nyambung dengan tema warna blog Jona Rendra ini yang juga biru. Mau pasang widget daftar isi tampilan tab yang keren ini? Baca selengkapnya artikel ini.

Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren

1. Login ke blogger
2. Pada dashboard, pilih blog anda lalu masuk ke menu Entri
3. Klik Buat Entri, setelah itu masuk ke edit entri mode HTML (caranya klik saja tulisan HTML yang ada disamping Compose)
4. Copy kode dibawah ini, lalu paste tepat di bagian HTML entri tersebut.



<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#EBEBEC;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#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;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#D8D8D8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#676767;
  color:white;
  -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;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #676767;
  -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 Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#000;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#D2D2D2;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #5C5C5C;
  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 #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#4D4F4D;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>


<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://jonarendra.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://jonarendra.googlecode.com/files/daftar-isi-keren.js" type="text/javascript"></script>  </div>
5. Sekarang tinggal di kustomisasikan sendiri dengan mengganti url berwarna biru dengan alamat blog anda.
6. Terakhir klik Publikasikan dan selesai. Coba buka halaman daftar isi yang telah anda pasang tadi. Sudah muncul kan?

Ups, kode diatas ternyata kode dengan widget daftar isi tema berwarna putih abu abu. Widget daftar isi style biru kodenya seperti ini



<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#8A94F0;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#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;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#C4C9F8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#181D67;
  color:white;
  -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;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #181D67;
  -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 Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#051466;
  line-height:20px;
  height:20px;
  padding:0 12px;
  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 .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  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 #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>


<br />
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://jonarendra.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://jonarendra.googlecode.com/files/daftar-isi-keren.js" type="text/javascript"></script>  </div>
Jangan lupa ganti url berwarna biru dengan url blog anda

Akhirnya selesai sudah Membuat Widget Daftar Isi Tampilan Tab Yang Keren. Jadi, saya sudah berikan 2 tema warna daftar isi diatas. Tinggal pilih saja widget mana yang kelihatannya cocok dengan blog anda.

Widget ini memang sebaiknya di pasang di postingan. Ini dikarenakan cukup besar. Kalau dipasang di sidebar akan kurang menarik. Tetapi jika anda butuh widget yang dipasang di sidebar, mungkin Widget Daftar Isi Berdasarkan Satu Label akan cocok.

Merasa terlalu lebih banyak CSS yang ada pada widget ini? Mau yang polos? Widget Daftar Isi Berdasarkan Label Tampilan Ringan lah yang tepat. Itulah keseluruhan artikel Jona Rendra yang berjudul Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren, semoga dapat berguna untuk menghias blog anda. Biasanya postingan daftar isi itu diletakkan sebagai menu di menu horizontal. Seperti blog ini.

Jika ada kesulitan saat mengerjakan langkah langkah diatas, widget tidak muncul atau sebagainya, silahkan tanyakan lewat komentar.

6 comments for "Cara Membuat Widget Daftar Isi Tampilan Tab Yang Keren"

  1. AnonymousJuly 1, 2013 at 6:44 PM

    yg item kayanya menarik.. yg biru sama kaya pnya saya.. :D

    come back

    ReplyDelete
    Replies
    1. JhonarendraJuly 1, 2013 at 8:30 PM

      owh, sudah pake juga ya?
      makasih ya sudah berkunjung dan sempat berkomentar

      Delete
  2. AnonymousJuly 2, 2013 at 10:15 AM

    wah iya keren gan, nanti ane mau nyoba

    ReplyDelete
  3. Yazid ZidanJuly 3, 2013 at 4:50 PM

    wah keren sob, menarik dan simple :) !!, mau dicoba tapi udah ada :D , thanks yah

    ReplyDelete

Post a Comment

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar