Cara Membuat Daftar Isi Keren

Halo sobat RD ,tips yang ingin saya ungkapkan diblog saya, membuat Daftar Isi Keren Di Blog. bergaya seperti Rak Buku, pastinya keren dan menarik, untuk contohnya sobat bisa melihat gambar dibawah ini

bagaimana? keren dan marik gk??? kalau menarik yah lebih baik kita langsung saja ke tutorialnya

• 1. Login Ke Blogger
• 2. Klik Buat Entri Baru ( Buat Postingan Baru )
• 3. Klik HTML lalu masukan kode dibawah 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/AVvXsEgjjYm60ZOyk1w9lBNu50TARIh19k7BFdO-7O1Qy9Qkz-w9G_XJzWYsJmVPsGPoeLD4cV7DYee7301HLJPnPeVMKlZ8c9KAKppG8VLX9Us0L2mtQaI10_8Oi_-VZI1VEiALFc9TmsAFvqg/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/AVvXsEhVK5D3Q8aU6a_rWgFeJ0Sk95RY7u0pAVSt0PLZVXDTPiYt71yvAcGnazYXAiFAKdIbV1_wEWA3o4V01KCWWiDtD8r9lYfBTivpOVJ7PNd0lb6awMkgzqZm-XuUqQtJ0xDW_EUQ4mL3aoY/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/AVvXsEg1nvAmoNkOlkNuosC9KobbpNAZhYSAFDQpwMI-8SpRAsN6eNnDIWn1chjgt70zsVl_RO6mANHz4fy69zmD10Nm6f7tu6AkcfrXqSnrwaL_eq5JxvLJh7dr8odd8yPMj6-_2gSK993O3as/s1600/nextprev.png);
             background-position:top center;
             background-repeat:no-repeat;
    }
    </style>
    <script type="text/javascript">
                      var jumlahposting = 18;
                      var urlblog = "http://riezky-doea.blogspot.com";
                      var minpaginas = 5;
                      var maxpaginas = 10;
                      var thumbs = "http://upload.wikimedia.org/wikipedia/commons/6/66/Colour_wheel_(black_background).JPG";
                                                </script>
    <script language="javascript" src="http://hanjs.googlecode.com/files/sitemaps.js"></script>

•  4. Publikasikan, dan selesai

Tambahan :

• - Kode yang berwarna merah adalah jumlah postingan yang ingin ditampilkan pada halaman pertama
• - Kode yang berwarna biru adalah jumlah angka pada navigasi
• - Kode yang berwarna cokelat adalah jumlah maksimal navigasi
  
  Sumber