Membuat Daftar Isi Blog Mirip DTE

Tutorial Blog - Pada kesempatan kali ini saya ingin memberikan tutorial tentang bagaimana Membuat Daftar Isi Blog Mirip DTE. Pasti sudah tau banyak yang tau kan Blog nya DTE hehehee....

Oke silahkan yang ingin membuat Daftar Isi berdasarkan kategori seperti DTE ikuti langkah-langkah dibawah ini :
Caranya login ke akun blogger anda -> Masuk ke tab Laman, klik Laman Baru -> Pilih Laman Kosong
Salin kode dibawah ini dan masukkan ke bagian HTML (bukan Compose).

<div id="table-outer">
<div id="tablesitemap">
<div class="isinyaxc">
<div class="leftnya">
<label>Urutkan daftar berdasarkan:</label></div>
<div class="rightnya">
<select id="orderFeedBy"><option selected="" value="published">Posting Terbaru</option><option value="updated">Posting Diperbaharui</option></select></div>
</div>
<div class="isinyaxc">
<div class="leftnya">
<label>Filter daftar berdasarkan kategori:</label></div>
<div class="rightnya">
<span id="labelSorter"><select disabled=""><option selected="">Memuat...</option></select></span></div>
</div>
<div class="isinyaxc">
<div class="leftnya">
<label>Cari dengan kata kunci:</label></div>
<div class="rightnya">
<form id="postSearcher">
<input type="text" />
</form>
</div>
</div>
</div>
</div>
<br />
<header id="resultDesc" style="color: white; font-weight: bold;"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
<span class="loadingx">Loading...</span></div>
<style type="text/css">
#main-wrapper {background:#333;}
h2.post-title {border-top:1px solid #444;border-bottom:1px solid #444;color:#fff}
.post-body {margin:4px 0px;border:none;color:#fff;text-shadow:none;}
#blog-pager, .breadcrumbs {display:none;}
.comments {border:none}
#main-wrapper {box-shadow:none}
#tablesitemap{border-bottom: 1px solid #444;color: white;overflow: hidden;padding: 3px 0;}
.isinyaxc{overflow:hidden}
.leftnya{float:left;height: 22px;line-height: 20px;text-align: left;width: 48%;}
.rightnya{float:right;width:50%}
.isinyaxc select{width:100%;border:0;padding:1px;background-color:#222;color:white}
.isinyaxc input{border:0;outline:0;margin:0;width:100%}
.isinyaxc form{padding:0}
ul#feedContainer,ul#feedContainer li{margin:0;list-style:none;padding:0;overflow:hidden}
ul#feedContainer li{background-color: #373737;border: 1px solid #3C3C3C;display: block;float: left;height: 105px;margin: 0; padding: 8px 10px;position: relative;width: 46.9%;}
.inner img{background:#444444;border: 1px solid #3C3C3C;float: left;margin-right: 6px;margin-top: 4px;padding: 2px;}
.toc-title{font-family:'Coda';font-size:12px;color: white !important;}
.inner strong{font-weight:normal;font-size:10px;color:#eee}
.news-text{font-size:11px;line-height:13px;color:#888 !important}
#feedNav .next,#feedNav .front,#feedNav .loadingx, #feedNav span{width:100%;display:block;text-align:center;height:30px;line-height:30px;background-color:#444;color:white;}
@media only screen and (min-width:768px) and (max-width:989px){ul#feedContainer li {height: 108px;width: 100%;margin: 0}}
@media only screen and (max-width:767px){ul#feedContainer li {height: 108px;width: auto;margin: 0}}
@media only screen and (max-width:479px){ul#feedContainer li {width: auto;margin: 0;height: 135px;}}
</style>
<script src="http://first-secondary.googlecode.com/svn/trunk/lainnya/Daftarisi.js" type="text/javascript"></script>
<br />
<div style="clear: both;">
</div>

Note : Untuk kode yang ditandai warna MERAH atau anda bisa klik file berikut :

http://first-secondary.googlecode.com/svn/trunk/lainnya/Daftarisi.js 

Salin Kode ini ke Editor Notepad lalu silahkan edit dengan Notepad dan ganti URL yang ada disitu dengan URL blog anda simpan dengan extensi.js dan uploud di Google Code atau Yourjavscript

Selamat Mencoba