Tips Membuat Daftar Isi Unik Yang Mirip Rak Buku

Hai sobat blogger, pernahkah sobat melihat daftar isi yang unik dan menarik, dan inilah salah satunya dari daftar isi yang unik itu,. kali ini saya akan membagikan cara membuat daftar isi yang unik, bentuknya mirip dengan rak buku, cuman ini agak sedikit berbeda, dan berikut adalah screenshotnya 

Tanpa basa-basi lagi, langsung saja berikut adalah script untuk membuat daftar isi seperti gambar diatas :

<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/AVvXsEiDl7GXxmSfP6w4iKuFEymXUvj5vkAYNrefMyQGLWUzGFo1Xhfy7Q5X_ABPup1CUos1gam1JlL8cMK40EHnwi7Vu3RJSpnum8QQqZOMtgA2ojgXyOYj6BZaAdHpfp0HwFqmAp50_D8CiFE/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/AVvXsEiv1f1Fs7I7g6YGCyhQz-sty3QNB9YxoMbH9AyoiO-bCI4W4pUr9TDqjFzXbvX_vq144bOSCmVWVHj53yVwgCTvgvEk6zBC3xdpcl7F1LKmZC8Gn2a4bPEJsOxmJxI697xdOgMXQYd2eQU/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/AVvXsEi-xOE9Wd0zAJRoXF18gysLvES2mI1U92nmbm07zPvoQ11XFT6miVJAhXmFivgvXkWt9KQXyd1vWkDIdaBeCaGZmUyKt2khCqhX5H5iGH29biGAGa8EbzY_pUw-L8tt9LTAdQjAkRA_xEw/s1600/nextprev.png);
         background-position:top center;
         background-repeat:no-repeat;
}
</style>
<script type="text/javascript">
                  var jumlahposting = 18;
                  var urlblog = "http://pro-duck.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>

Keterangan :

-  Ganti 18 dengan yang sobat inginkan, dia adalah jumlah post yang ditampilkan dalam satu halaman.
-  Ganti http://pro-duck.blogspot.com dengan Url blog sobat
-  5 dan 10 adalah jumlah nafigasi minimal dan maksimal yang ada di bawah post

Cara Pasangnya :

-  buka blog sobat
-  buat laman baru, atau bisa juga post baru
-  pada halaman penulisan blog ada Compose dan HTML, pilih yang HTML
-  kemudian masukan kode diatas ke dalam halaman HTML tersebut
-  Publikasikan dan lihat hasinya..

Selamat sobat berhasil membuat Daftar Isi seperti rak buku yang unik dan menarik,.

Sekian saja dari saya, semoga artikel diatas bermanfaat, thanks for visit    ^_^

Oh iya, satu lagi sob.. Jika sobat merasa artikel diatas bermanfaat bagi sobat, saya harap sobat juga mau membantu saya dengan cara mengklik iklan dibawah ini kemudian menunggu hingga halaman iklan terload sempurna, atas bantuannya saya ucapkan banyak terima kasih.

Sumber : http://pro-duck.blogspot.com/2013/02/cara-membuat-daftar-isi-unik-yang-mirip.html