Membuat Daftar Isi Seperti Rak Pada Blog

Assalamualaikum.Wr.Wb

Sebelumnya Iq sudah mempostingkan cara Membuat Daftar Isi Dengan Jquery Pada Blog pembahasan kali ini sama cuma dengan tampilan yang berbeda. 

Jika sebelumnya dengan tampilan jquery, kali ini dengan tampilan yang mirip dengan Rak. bagaimana tampilannya...? berikut Demonya Klik Disini 

Bagaimana caranya...?

Langsung saja..

• Login
• Kawan bisa menyimpannya bebas dimana saja, bisa di Laman, Postingan, juga di Gadget
• Copy kode script dibawah ini kemudian Paste pada laman/postingan/gadget sesuai dengan kebutuhan

<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/AVvXsEgiZwsg8IBpUvWEf9Ah88ryoa3arhuOk1dt9JtPhqO0I-YdgiKQrU0PU9WH6fN74sMUEUmQxLe7zznRklc5O7RJSk1hZdCb5DYuuxmDE5ErtmwFJXTLQGi-ESVraoiCd6f4SGttvWuX3w/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/AVvXsEj0l2lvcRQpEUq1yJhkCzWlOkGJLs8krJ2hhyS0U_n6_JSSUmAn9nV94qsY06b-G6pj6LwiXZjHSfMNn0-sWhC9BbcyLERF8iRJ1bwUhmxjtQmM6Xs3-Nfgn_1Du-mCxQixyyUCfFl9qw/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/AVvXsEgJ4rpGt9AuwvrFjThaR3TzRkCMyHHm1fD9j9uNQ5VmHW_MZ7W2PBwKanNetSIfeI_YTR9EQfYzZfG4TL3r8_Qi9lD3xj-66d6P5dr2LCln1f9jqm9dJ2ibdYGmA8W-eg643FuJYdBXGA/s1600/nextprev.png);
         background-position:top center;
         background-repeat:no-repeat;
}
</style>
<script type="text/javascript">
                  var jumlahposting = 18;
                  var urlblog = "http://realiqbal.blogspot.com";
                  var minpaginas = 5;
                  var maxpaginas = 10;
                  var thumbs = "http://i1247.photobucket.com/albums/gg626/iq-dua3/sasasasasa.jpg";
                                            </script>
<script language="javascript" src="http://hanjs.googlecode.com/files/sitemaps.js"></script>

• Ganti tulisan yang bewarna merah dengan nama dan URL gambar blog kawan

Selamat mencoba dan semoga berguna untuk semua

Wassalammualaikum.Wr.Wb