Membuat Daftar Isi Sesuai Kategori

Tips CSS Membuat Daftar Isi Sesuai Kategori Label - Jika kamu ingin memberikan blog kamu Daftar isi mungkin kamu perlu mencoba script yang satu ini, script ini saya dapatkankan dari kak Blog Urang Kurai. Silahkan kamu copy script dibawah ini di postingan blog kamu atau elemen halaman blog kamu.

Sebenarnya banyak juga tutorial lain yang juga sangat bagus untuk diterapkan dalam membuat daftar isi seperti ini. Saya sendiri menggunakan daftar isi dari Father Abu farhan.

Jika anda ingin menggunakan variasi yang lain silahkan Anda Coba Menu Daftar isi yang satu ini.

<style>#daftar-isi-body{width:760px!important;
         height:600px!important; padding:30px 40px;
         margin:0 auto;
}
 #daftar-isi-wrap 
{
         margin: 0 auto;
}
 .box-posting 
{
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbM7ILnKtCUYV9h3R2yLYE_QmAR43S_XiJWHlLKL3y1LNGKcFwQwphJrIU1lp0jCPgSXV85NWtfXl9yUEbXPhyUl89ccChdEAIpxRLsrmd5v9shtDaeq-vfOtEoNsJgDLW8igvkady6A/s1600/bg-box.png);
         background-position:bottom center;
         background-repeat:no-repeat;
         overflow:hidden;
         cursor:pointer;
         float:left;
         height:140px;
         width:248px;
         margin:-50px 0 0 0;
}
 .box-posting img 
{
         height:46px;
         width:46px;
         float:left;
         margin:20px 0 0 25px;
         background-color:#2E0700;
         border:1px solid #2E0700;
         -webkit-border-radius: 30px;
         -moz-border-radius: 30px;
         border-radius: 50%;
}
 .box-posting .judul-posting 
{
         float:left;
         height:35px;
         margin:0;
         width:220px;
}
 .box-posting .judul-posting a
{
         font-family:arial,Serif !important;
         color:#774A34!important;
         text-shadow:0 0 1px rgba(0,0,0,0.9);
         margin:-40px 0 0 80px;
         display:block;
         font-size:13px !important;
         line-height:18px!important;
         font-weight:bold !important;

}
 .box-posting .judul-posting a:hover
{
         color:#333!important;
}
 .box-posting:hover 
{
         border-left-color:#C6EB04;
}

 #totales 
{
         text-align:center;
         color:#774A34 !important;
         text-shadow:0 1px rgba(0,0,0,0.2);

}
 #loadingscript 
{
         color:#444;
         font-family:Century Gothic;
         font-size:100px;
         letter-spacing:-10px;
         text-align:center;
         text-shadow:-5px 0 1px #444;
}
 #paginacion 
{
         color:#BBB;
         font-size:24px;
         font-weight:bold;
         height:35px;
         line-height:28px;
         padding:0;
         margin:0 auto;
         text-align:center;
}
 #paginacion span,#paginacion a 
{
         display:inline-block;
         font-size:13px !important;
         line-height:24px;
         font-weight:bold;
         margin:0 1px;
         width:25px;
         height:25px;
}
#paginacion a, #paginacion span.actual  
{
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9Z1L8N8Xtw9cYXqh1DRRaBrGyqLX6srGzy1R1K3tbP2tfnVQXtOgK0SfqXW-E6PYliV39sEGIo_B4_ABntCQkHIMeamUZVJVyhr6AuH06WJ90QomwWh3qE9HhanY8XtrqSVrHoqnS5I/s1600/page-link.png);
         background-position:top center;
         background-repeat:no-repeat;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
}
 #paginacion span.actual 
{
         color:#774A34 !important;

}
 #paginacion a:hover 
{
         color:#FFF !important;
}
 #paginacion .nextprev-link,
 #paginacion span.nextprev-link 
{         border:none;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
         width:100px;
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqkNyu-zByp4Jiu25WlSFstbxvCiknov6Vxmjis7sK_PybSYzSHCtOrZk7JQ03yNNIVvSk75zRDZrGhyuOYCEezGTl-vZjqpjsGjcLK-Wlc81JSBa44s3R5CkZEzKXRkUEONywsR1gVeY/s1600/nextprev.png);
         background-position:top center;
         background-repeat:no-repeat;
}
</style>

                           <script type="text/javascript"> 
                                 var jumlahposting = 18;
                   var urlblog = "http://fidianalestari.blogspot.com";
                   var minpaginas = 5;
                   var maxpaginas = 10;
                   var thumbs = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Uze6BodhLjf-PWq6OtcIMCGqID83_0fS81KJRr5RTKLpXDXGJOcZLXiSnmI7cK5G4zVbW4wffCXiSzhIcw6EmPn7PU-O3yRQ26sdRkVJggnoUBKbztO3eGrQa6n4pUBUm8owkyR_a2c/s1600/icon-img.png";
</script><script language="javascript" src="http://free-files-urangkurai.googlecode.com/files/sitemap.js"></script> 

Ganti tulisan warna merah dengan blog kamu.
Dan silahkan di publih, Selesai.

Sumber : http://urang-kurai.blogspot.com/2012/04/daftar-isi-part.html