Daftar Isi Otomatis Blogger Dengan Thumbnail dan Navigasi

Memiliki Halaman Daftar Isi atau yang biasa di sebut Table Of Content dalam sebuah blog atau website menjadi hal wajib untuk memudahkan visitor mencari content yang mereka inginkan. Tentunya Daftar Isi ini akan menjadi point plus untuk blog kita dimata para visitor. Membuat daftar isi tidak boleh asal-asalan, karena daya tangkap masing-masing visitor berbeda-beda, kalau kita membuat daftar isi acak-acakan tentu hal ini sulit di mengerti oleh visitor dan bukan tidak mungkin visitor enggan membaca isi dari daftar isi kita.

Nah, pada kesempatan kali ini saya akan berbagi tips nih Bagaimana Cara Membuat Daftar Isi Otomatis Blogger Dengan Thumbnail dan Navigasi. Bisa juga sih membuat secara manual, tapi dijamin deh jari ente gempor kalau posting di blog ente banyak..hehe. Oh iya, ini berbeda loh dengan Trik Membuat Widget Daftar Isi Otomatis pada postingan yang dulu.!

Oke, masuk ke topik. Langkah pertama untuk membuat daftar isi otomatis dengan thumbnail dan navigasi ini kita harus Login dulu ke blogger. Kalau sudah pilih blog mana yang ingin dibuatkan Daftar isi otomatis ini. Kemudian pilih menu laman, berikut screenshotnya :

Buat halaman baru, seperti terlihat pada gambar diatas. Pilih yang HTML, dan taruh kode berikut ini :

<style type="text/css">
#toc-outer {
  font:normal 11px/14px Arial,Sans-Serif;
  color:#FFCC00;
  text-align:left;
  margin:0px auto;
  border:2px solid #DFC;
  padding:15px;
  background-color:#040403;
  -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.6);
  -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.6);
  box-shadow:0px 1px 4px rgba(0,0,0,0.6);
}
#loadingscript {
  background:#F6EFBB url('http://www.gstatic.com/codesite/ph/images/dl_arrow.gif') no-repeat 50% 46%;
  padding:10px;
  font:bold 20px Georgia,Serif;
  color:black;
  height:400px;
  text-indent:-9999px;
  -webkit-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
  -moz-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
  box-shadow:inset 0px 0px 0px 5px #EAE0AD;
}
.itemposts {
  margin:0px auto 5px;
  height:auto;
  background-color:#474645;
  overflow:hidden;
  display:block;
}
.itemposts h6 {
  margin:0px auto 2px;
  font:bold 12px/14px Arial,Sans-Serif;
  background-color:#70736E;
  background-image:-webkit-linear-gradient(top, #FF0000, #FF6600);
  background-image:-moz-linear-gradient(top, #FF0000, #FF6600);
  background-image:-ms-linear-gradient(top, #FF0000, #FF6600);
  background-image:-o-linear-gradient(top, #FF0000, #FF6600);
  background-image:linear-gradient(top, #FF0000, #FF6600);
  padding:10px 15px;
  text-transform:none;
  color:white;
}
.itemposts h6 a {
  color:white;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(0,0,0,0.3);
}
.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 2px 0px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  background-color:##323331;
  border:1px solid #dcdcdc;
  padding:4px;
}
.itemposts .iteminside {
  padding:10px;
  background-color:#343434;
  border-top:1px solid #e5e5e5;
  -webkit-box-shadow:inset 0px 1px 0px white;
  -moz-box-shadow:inset 0px 1px 0px white;
  box-shadow:inset 0px 1px 0px white;
}
.itemposts .itemfoot {
  clear:both;
  border:1px solid #EAE7DB;
  padding:5px 10px;
  margin:10px 0px 0px;
  background-color:#323331;
  color:#ff00ff;
  overflow:hidden;
}
.itemposts .itemfoot a.itemrmore {
  font-weight:bold;
  color:#ffffff;
  float:right;
  text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {
  color:#ffffff;
  text-decoration:underline;
}
#itempager {
  background-color:#F2F0F1;
  padding:30px 0px;
  border-top:1px solid #E5E5E5;
  -webkit-box-shadow:inset 0px 1px 0px white;
  -moz-box-shadow:inset 0px 1px 0px white;
  box-shadow:inset 0px 1px 0px white;
}
#pagination, #totalposts {
  color:#999;
  font:bold 10px Verdana,Arial,Sans-Serif;
  padding:0px;
  margin-bottom:10px;
  text-align:center;
}
#pagination span, #pagination a {
  border:1px solid #e5e5e5;
  color:white;
  display:inline;
  margin:0 1px;
  padding:2px 5px;
  text-indent:0px;
  background-color:#323331;
  text-decoration:none;
}
#pagination span.actual,
#pagination a:hover {
  background-color:#7483BC;
}
#pagination span.hidden {
  display:none;
}
</style>
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Read more &#9658;",
    prevText       = "Preview",
    nextText       = "Next",
    siteUrl        = "http://blog-thinker.blogspot.com",
    postsperpage   = 10,
    numchars       = 350,
    imgBlank       = "https://lh5.googleusercontent.com/-gMU5IAD2gJ8/AAAAAAAAAAI/AAAAAAAABNA/KZ5hkd9VqV8/s250-c-k/photo.jpg";
</script>
<script src="http://blog-thinker.googlecode.com/files/table-of-content-bt.js" type="text/javascript">
</script>

Ganti URL http://blog-thinker.blogspotcom dengan URL blog Anda dan tekan tombol Publishkan. Selesai.

Tweet