Memasang Daftar isi V.3

Memasang Daftar isi V.3Daftar isi merupakan hal yang sangat penting bagi media baca untuk memudahkan pembaca menemukan hal yang mereka cari. Nah maka dari itu diriku ini akan mencoba untuk berbagi kepada sobat blogger tentang salah satu bentuk dari daftar isi yang saya gunakan dalam blog saya.. bentuknya seperti gambar di bawah.

kerenkan?? lihat demonya di sini..!! ini adalah salah satu bentuk daftar isi yang saya gunakan. Dan izinkan saya untuk share tentang cara memasang salah satu fitur daftar isi ini kepada sahabat blogger (sok sopan, hehehe). Bagi yang udah tahu yah lewatin aja deh!! OK kita mulai aja
1. Masuk ke Akun Blog anda
2. Klik Rancangan => Edit HTML
3. Copy kode Jquery dibawah ini dan letakan diatas kode </head>
Perhatian : bagi sobat yang udah memasang script jquery semacam ini di blog sobat, langkah 3 ini delewati aja!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
4. Simpan Template
5. Klik Posting => Entri Baru => Edit HTML
Copy kode dibawah ini dan letakan dikotak Edit HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#arsip-buku-arimjie {
background:#333;
border:2px solid #fafafa;
color:#fff;
-webkit-box-shadow:0 1px 2px #000;
-moz-box-shadow:0 1px 2px #000;
box-shadow:0 1px 2px #000;
overflow:hidden;
}
#arsip-buku-arimjie .arimjietrigger1 {
overflow:hidden;
margin:0 0;
cursor:pointer;
text-decoration:none;
font:normal 13px/100% 'Verdana',Arial,Sans-serif;
padding:10px 15px 11px;
color:#bbb;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
border-top:1px solid #444;
border-bottom:1px solid #222;
background:#333;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333333');
background:-webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#333));
background:-moz-linear-gradient(top, #3c3c3c, #333);
background:-o-linear-gradient(#3c3c3c, #333);
background:linear-gradient(#3c3c3c, #333));
}
#arsip-buku-arimjie .aktif {
color:#efefef;
border-top:1px solid #24B6E3;
border-bottom:1px solid #104968;
background:#248AB0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');
background:-webkit-gradient(linear, left top, left bottom, from(#248AB0), to(#21739B));
background:-moz-linear-gradient(top, #248AB0, #21739B);
background:-o-linear-gradient(#248AB0, #21739B);
background:linear-gradient(#248AB0, #21739B));
}
#arsip-buku-arimjie ul {
background-color:#333;
margin:0 0;
padding:0;
color:#999;
list-style:none;
}
#arsip-buku-arimjie li {
line-height:normal;
font:normal 11px 'Verdana',Arial,Sans-serif;
margin:0 0;
padding:5px 5px 5px 15px;
white-space:nowrap;
text-align:left;
border-top:1px solid #444;
border-bottom:1px solid #222;
list-style:none;
}
#arsip-buku-arimjie li:first-child {border-top:none;}
#arsip-buku-arimjie a {color:#5687f8;}
#arsip-buku-arimjie a:visited {color:#5687b8;}
</style>
<script type="text/javascript">
$(document).ready(function() {
     $('.isi-arsip').hide();
     $('.arimjietrigger1:first').addClass('aktif').next().show();
     $('.arimjietrigger1').click(function() {
          if($(this).next().is(':hidden')) {
               $('.arimjietrigger1').removeClass('aktif').next().slideUp(600);
               $(this).toggleClass('aktif').next().slideDown();
          }
     });
});
var month2 = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
</script>
<script src="http://arimjieblog.googlecode.com/files/arimjie-archieve1.js" type="text/javascript">
</script>
<script src="http://arimjie.blogspot.com/feeds/posts/default?max-results=5000&alt=json-in-script&callback=loadtoc">
</script></div>

Perhatian: url yang text merah ganti dengan url blog sobat
6. Pratinjau
kalau udah sesuai yang diharapkan baru ke langkah terakhir
7. Terbitkan Entri
Bagi sobat yang kesulitan untuk memasang Daftar isi Semacam ini silahkan sobat blogger tinggalkan komentar di bawah..!! Ok sekian dulu Smile