Membuat Daftar Isi Versi II (Efek jQuery)

TIPS untuk Blogger : setelah sebelumnya saya memberikan tips Cara Membuat Daftar Isi Versi I, sekarang saya akan memberikan tips yang sama. Tetapi pada tips kali ini kita akan membuat daftar isi dengan efek jQuery. Tips ini sebelumnya saya dapat dari sobat blogger Mas Dalang yang  sudah lama melanglang buana di dunia blogging. Jika blog sobat sudah mempunyai daftar isi, tidak apa-apa sobat blogger menggunakan itu. Sekarang saya hanya memberikan tips baru kepada sobat, siapa tau anda tertarik dengan daftar isi yang ini.

DEMO

Jika sobat blogger tertarik dengan tips ini, silahkan ikuti langkah-langkahnya:

1. Login ke blogger dengan account anda

2. Pada Dasbor blog anda, silahkan pilih Template

3. Kemudian pilih Edit HTML ==>> Lanjutkan

4. Jangan Lupa backup template terlebih dahulu dengan cara men-Download Full Template untuk menghindari segala kesalahan.

5. Cari kode ]]></b:skin> dan letakkan kode CSS beriku diatasnya.

#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/AVvXsEjE4PDIwOev13_K2K5dW8nCTtoqP0HQqEsPL6fEriCAXBeklOlwhqN2q1P96Lf8J36bJTexBgw4ETG3lpccYoBMTTZCP70q__shi4cxzpa_cQJH307ILnnxtcRXsg_Af_L5TnbiBKVZJL4/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/AVvXsEgp0tBZGZvLzzN93T-KZg9Zy9Z9FBFHMxayRa3HRF3DxxbIaWguVaQGY47Hgd1p4VEsYGO9-ti_eRS-Fkv2sqjPS5P2yQvrzvYAZbHsSL0Ch3yA4J6tDj3nbA5R_uy-vA6hNx3lDpR81E8/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/AVvXsEjh6fb5sLH_ZxLDFDx8zSNT7RyiGKn9jjAMBAM6bcjgJwaaKA9HskCXpoUL7Xf2U29oUKQ9gIvCp8Tfin8dkmsyPzVwYSOpEn1XFr6LAFPuLk4M0QwkOakYIuEvcCGbVGs9Bn6RtVotjzk/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);
}

6. Kemudian cari kode </head> dan letakkan kode berikut diatasnya.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

Perhatian! Ingat jika pada bagian tag head pada template blogger anda sudah pernah/ada framework jQuery maka lewati Langkah 6.

7. Simpan Template blog anda

Langkah selanjutnya adalah, silahkan buat postingan dengan judul terserah anda. Dengan catatan Pindahkan mode Editor artikel ke mode Edit HTML. Kemudian letakkan kode berikut ini

<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/jquery.toc.acc.min.js"></script>
<script src="http://tips-untuk-blogger.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Perhatian: ganti tulisan berwarna merah dengan alamat URL blog anda.

Kemudian silahkan anda Publish postingan anda dan lihat perubahannya pada blog anda.
Selamat mencoba, semoga berhasil dan mohon maaf jika ada kesalahan. (Jkt/2012)