Cara membuat menu Daftar ISI dengan tampilan menarik

Membuat daftar isi pada blog bertujuan agar pengunjung dengan mudah melihat artikel yang mereka suka.
Membuat daftar isi yang menarik juga sangat disukai pengunjung blog, apalagi daftar isi yang akan saya tunjukan caranya tampilan nya sangat elegan dan keren . Para blogger juga sangat meminati tips ini untuk mempercantik tampilan blog nya . Daftar isi yang saya share caranya ini bernama daftar isi jQuery.  Dengan animasi scroll kebawah yang akan mempermudah pencarian dan tidak memakan tempat pada halaman postingan . Daftar isi otomatis akan menampilkan posting blog terbaru dari sobat blogger tanpa perlu sobat repot repot mengeditnya lagi.

keren kan daftar isinya

Atau jika anda mau melihat contohnya langsung anda bisa melihatnya di LINK INI !!!

Nah, langsung saja sobat blogger, bagi sobat yang mau tahu cara membuat daftar isi dengan mudah ikuti petunjuk dibawah ini :

1. Masuk/login lah ke blogspot

2. Buatlah Entri Baru / postingan baru

3. Pilih menu HTML , lalu copy kode dibawah ini dan pastekan pada postingan kamu , dan jika sudah carilah URL  http://starchau.blogspot.com/   lalu ganti dengan URL blog kamu

<style type='text/css'> #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_bbMI5QzNmsaHaYbGNhMJUDKV4ssoiK-WtWLFlRamcnyM7fCGXimUaCsGzlZdmoLPY6O1oWEqZTPTAaX-v2_SODnRlag4N6j607ptfuu9_vZrnZTe6STuwwU-gaQuyqYKnDVR48YJUsE/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoU5j3SnGzRm1lMr-EEbd16H6MjeoKs1iL7FOwPd-3F8YmVqIqiY-YsuoqP-u3Eh_Jst_-07h1JtGlhEbI6haokyyneyozuhvXXxpgZok4dB15KpdbiKHlKXJ7sTlqzz9e3v1Uk2B-sY/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbhKsiEfTndgyhSNGu1U9iHRzgcfMwh_3AlaXD54thfPKXBXlefQuFjMnY1dEX3xJoU0xIXPh8c82lUl7RsLtUupx4g2Ul8n6Yc1DgHjD_FfCQ0nIpw0rcl49q9YmR3J3o7b2HjIAyK10/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script> <script src="http://starchau.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Artikel Terkait :

MASUKKAN SCRIPT HTML/JAVASCRIPT KAMU DISINI..!!!