Cara Membuat Daftar Isi otomatis dengan desain Keren

Cara-membuat-daftar-isi-desain-keren

Halo .. ? Bagaimana kabar anda saat ini ? :)

Sebelumnya saya telah memposting artikel tentang Cara Memasang Widget Sharing Mashable (updated).  Lihatlah gambar diatas, gambar tersebut adalah gambar hasil dari tutorial kali ini, yaitu tentang Cara Membuat Daftar Isi otomatis dengan desain Keren. Tutorial ini saya dapat dari blog milik teman saya dengan alamat anrhy.blogspot.com 

Daftar isi sangatlah penting bagi blog, karena dapat diibaratkan sebagai petunjuk arah atau guide dari blog kita. Daftar isi diharuskan ada disetiap blog ataupun website, itu merupakan sebuah kewajiban bagi webmaster ataupun blogger. Karena fungsi dari daftar isi ini sangatlah penting yaitu sebagai peta blog yang memudahkan pengunjung dalam menjelajahi blog anda

Cara membuat Daftar Isi

1. Seperti biasa masuk ke akun blogger anda
2. Masuk ke template dan edit HTML
3. Simpan script di bawah ini diatas <b:skin>

#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;
  }
}
4. Save jika sudah selesai. Lalu langkah selanjutnya, masuk ke entri post 
5. Pastekan Script di bawah ini pada mode HTML dalam postingan (Bukan Compose)
<div id="tabbed-toc">
<span class="loading">Loading Sitemap .. Please Wait.. :)</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://ujangyoyo.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="https://googledrive.com/host/0B9aCNMbcS5BlVVpSMnlsN2FvTjA" type="text/javascript"></script> 
Keterangan:
- Ganti tulisan yang hijau dengan URL blog anda
- Tulisan berwarna merah adalah kata-kata yang muncul saat daftar isi sedang loading


4. Simpan, selesai deh 

Beberapa Kostumalisasi (CTRL+F untuk menemukan kode dibawah)

  • activeTab : Nilai 1 akan membuat tab di urutan pertama menjadi aktif, konten tab pertama akan terbuka saat pertama kali halaman diakses.
  • showDates : Nilainya true untuk menampilkan waktu terbit postingan.
  • showSummaries : Nilainya true untuk menampilkan ringkasan posting.
  • showThumbnails : Nilainya true untuk menampilkan thumbnail (tidak direkomendasikan karena akan membuat halaman lama termuat).
  • thumbSize : Untuk menentukan ukuran thumbnail.
  • noThumb : URL gambar cadangan untuk posting yang tidak memiliki gambar di dalamnya.
  • monthNames : Menentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Asal.
  • newTabLink : Nilainya 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 : Nilai false untuk menyortir posting secara normal berdasarkan bulan terbit, true untuk menyortir posting berdasarkan alfabet.
  • showNew : Nilai false untuk menyembunyikan label New! pada artikel baru. Ganti dengan angka untuk menentukan berapa banyak posting terbaru yang ingin ditandai dengan label New!. 
  • newText : Markup HTML bebas untuk membuat label pada posting-posting terbaru (misalnya New! atau Terbaru!).

Last Words

Jadi kesimpulannya, daftar isi diharuskan ada disetiap blog ataupun website, itu merupakan sebuah kewajiban bagi webmaster ataupun blogger. Karena fungsi dari daftar isi ini sangatlah penting yaitu sebagai peta blog yang memudahkan pengunjung dalam menjelajahi blog anda. Saya telah mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Cara Membuat Daftar Isi otomatis dengan desain Keren. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan. 

Sekian post tentang Cara Membuat Daftar Isi otomatis dengan desain KerenJangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata dan semoga tulisan ini dapat bermanfaat bagi anda :)


Share this

Related Posts

close