Pada kesempatan kali ini kejarinformasi akan berbagi pengalaman 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 dan 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, silakan ketik disini ->></label></div>
<div class="rightnya">
<form id="postSearcher">
<input type="text" />
</form>
</div>
</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:transparent;}
h2.post-title {border-top:1px solid #444;border-bottom:1px solid #444;color:#000}
.post-body {margin:4px 0px;border:none;color:#000;text-shadow:none;}
#blog-pager, .breadcrumbs {display:none;}
.comments {border:none}
#main-wrapper {box-shadow:none}
#tablesitemap{border-bottom: 1px solid #444;color: black;overflow: hidden;padding: 3px 0;}
.isinyaxc{overflow:hidden}
.leftnya{float:left;height: 22px;line-height: 20px;text-align: left;width: 49%;}
.rightnya{float:right;width:50%}
.isinyaxc select{width:100%;border:0;padding:1px;background-color:#b30000;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: #EDEDFF;border: 1px solid #cccccc;display: block;float: left;height: 95px;margin: 5px; padding: 10px 10px;position: relative;width: 44.0%;}
.inner img{background:#cccccc;border: 1px solid #ccc;float: left;margin-right: 6px;margin-top: 4px;padding: 2px;}
.toc-title{font-family:'Coda';font-size:13px;color: #b30000 !important;}
.inner strong{font-weight:normal;font-size:10px;color:#0C1272}
.news-text{font-size:11px;line-height:13px;color:#000000 !important}
#feedNav .next,#feedNav .front,#feedNav .loadingx, #feedNav span{width:100%;display:block;text-align:center;height:30px;line-height:30px;background-color:#b30000;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="
https://portal-stemba.googlecode.com/files/daftarisi.js" type="text/javascript"></script>
<div style="clear: both;">
</div>
Nah disana ada file .js yang harus anda ubah menuju url anda sendiri. Salin kode .js ini dengan notepad dan ganti dengan URL blog atau domain anda jika blogspot telah anda directing ke domain. Langkah selanjutnya,upload kembali file .js dengan menggunakan bantuan
Google Code
Yourjavscript
Silakan ambil file js ini dan upload
Nah hasilnya akan menjadi seperti punya saya ini.
Selamat mencoba..
