Home » Mempercantik Blog » Cara Membuat Daftar Isi Otomatis Blogger dengan Thumbnail dan Navigasi

Cara Membuat Daftar Isi Otomatis Blogger dengan Thumbnail dan Navigasi

Posted by tai Posted on 21:15 with No comments

Membuat Daftar Isi pada Blog tentunya sangat wajib ya sobat pada blog untuk memudahkan pengunjung supaya tidak tersesat, hehe, tapi bagaimana kalau postingannya terlalu banyak sobat pastinya ribet deh kalau buat daftar isi secara manual, hehe, tapi disini saya sharing cara buat daftar isi secara otomatis pada blog sobat, mudah kok hanya tinggal copy paste, dan cara ini ane dapet dari blog temen dan tentunya saya sharing kembali dengan kembali mencatat di blog saya, oke langsung saja ya sobat, sebelumnya thanks ya buat http://blog-thinker.blogspot.com atas pencerahannya, hehe.

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><br />
<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 ►",
    prevText       = "Preview",
    nextText       = "Next",
    siteUrl        = "http://sukakompi.blogspot.com",
    postsperpage   = 10,
    numchars       = 350,
    imgBlank       = "https://lh5.googleusercontent.com/-gMU5IAD2gJ8/AAAAAAAAAAI/AAAAAAAABNA/KZ5hkd9VqV8/s250-c-k/photo.jpg";
</script><br />
<script src="http://blog-thinker.googlecode.com/files/table-of-content-bt.js" type="text/javascript">
</script>

Ganti URL http://sukakompi.blogspot.com pada siteUrl dengan URL blog Anda dan tekan tombo Publishkan. Selesai.

0 comments:

Post a Comment