Membuat Daftar Isi/Sitemap Blogger Lebih Menarik

About this Post :
Post Title	>> Membuat Daftar Isi/Sitemap Blogger Lebih Menarik
Date	>> January 23, 2012
Author	>> Mr. Lam3rs
Link	>> http://31337day.blogspot.com/2012/01/membuat-daftar-isisitemap-blogger.html
Labels	>> Javascript

Untuk DEMO dapat di lihat langsung di blog ini yang berada disini
Dan untuk menerapkannya di blog anda, silahkan ikuti petunjuk dibawah ini:

1. Login ke akun blogger anda
2. Pilih Design » Edit HTML
3. Lalu copy kode di bawah ini dan letakkan di atas kode ]]></ b:skin>

.judul-label{
margin: 1em 0.6em 0em 0em;
padding: 6px;
font: 11px/100% verdana;
color: #00cc00;
font-weight:bold;
background: #000;   
border-left: double #008000;
border-bottom: 1px solid #008000;
}
.data-list{
text-align:left;
font-family:verdana;
font-size:11px;
}
.headactive{
color: #ff0000;
border-left: double #008000;
border-bottom: 1px solid #008000;
background: #000;
font-weight:bold;
}

Note: kode CSS di atas saya padukan mirip dengan daftar isi yang berada dalam blog ini, anda bisa memodifikasinya sendiri sesuai dengan tampilan blog anda :)

4. Lalu selanjutnya copy kode di bawah ini dan letakkan di atas kode </ head>

<script type='text/javascript'>var accToc=true;</script>
<script src='http://www.geocities.ws/thelam3rs/js/accordion-pack.js' type='text/javascript'/>

5. Simpan template anda!
6. Yang terakhir simpan kode di bawah ini dan terserah anda ingin meletakkannya dimana, bisa di postingan atau di gadget daftar laman blog anda.

<script src="http://www.geocities.ws/thelam3rs/js/sitemapv2.js"></script>
<script src="http://31337day.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Note: ganti text yang berwarna merah di dalam kode tersebut dengan url blog anda.

Baik sekian penjelasan saya mengenai membuat daftar isi/sitemap blogger dengan jquery, dan untuk yang merasa belum jelas dengan penjelasan saya di atas silahkan berkomentar di bawah postingan ini. Insya Allah akan saya respon secepatnya.

Terima kasih, semoga bermanfaat :)

Sources: http://www.abu-farhan.com/2010/05/table-of-content-and-accordion-for-blogger/