Daftar Isi Menarik Dengan Pilihan Sortir di Blog

Daftar Isi dengan pilihan sortir menarik untuk dicoba


bagaiman, menarik bukan ?
jika ingin membuat simak langkah-langkah dibawah.

Masuk di dashboard klik laman kemudian buat laman baru, masukkan kode dibawah ini pada mode HTML. Jika selesai silahkan publikasikan.

<style scoped="scoped" type="text/css">
.post-body li{background:none}
table outer {padding-top:10px;}
#tablesitemap{color:white;overflow:hidden;padding:3px;margin-bottom:15px;
background-color:#F96A6A;
border-bottom:4px #FB2E2Esolid;
}
.isinyaxc{overflow:hidden}
.leftnya{float:left;width:50%;text-align:right;padding-right:5px;height:25px;line-height:25px}
.rightnya{float:left;width:48%lmargin:3px 0}
.isinyaxc select{width:100%;border:0;padding:1px;background-color:#FFFCFC;color:#040404}
.isinyaxc input{border:0;outline:0;margin:0;width:100%}
.isinyaxc form{padding:3px 0}
ul#feedContainer,ul#feedContainer li{margin:0;list-style:none;padding:0;overflow:hidden}
ul#feedContainer li{position:relative; padding:0 4px; width:47%; margin:0 0.6% 10px 0.5%; display:inline-block; 
float:left; background-color:#FFFFFF; border:1px solid #FF4F4F;height:100px}
.inner img{float:left;margin-right:6px; padding:2px; margin-top:4px; border:1px solid #D2CECE}
.toc-title{}
.inner strong{font-weight:normal;font-size:10px;display:none}
.news-text{font-size:10px;line-height:15px}
#feedNav .next,#feedNav .front,#feedNav .loadingx, #feedNav span{width:100%;display:block;text-align:center;height:30px;line-height:30px;background-color:#FF4F4F;


@media only screen and (min-width:768px) and (max-width:989px){ul#feedContainer li {height: 108px;}}
@media only screen and (max-width:767px){ul#feedContainer li {height:108px;width:auto;}}
@media only screen and (max-width:479px){ul#feedContainer li {width:100%;margin: 0 0 10px 0;height: 135px;}}
</style>
<div id="table-outer">
<div id="tablesitemap">
<div class="isinyaxc">
<div class="leftnya">
<label>Urutkan:</label></div>
<div class="rightnya">
<select id="orderFeedBy"><option selected="" value="published">Tulisan Terbaru</option><option value="updated">Tulisan Diperbaharui</option></select></div>
</div>
<div class="isinyaxc">
<div class="leftnya">
Kategori</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 Artikel</label></div>
<div class="rightnya">
<form id="postSearcher">
<input type="text" /></form>
</div>
</div>
</div>
</div>

<header id="resultDesc"></header>

<ul id="feedContainer"></ul>
<div id="feedNav">
<span class="loadingx">Loading...</span></div>
<script src="http://hosting-kode-blogger.googlecode.com/svn/trunk/advanced-toc.js" type="text/javascript"></script>

<script type="text/javascript">
var tocConfig = {
 url: "http://www.infoalya.com",
 feedNum: 10,
 labelName: (window.location.hash && window.location.hash != '#0' && window.location.hash != '#search') ? encodeURIComponent(window.location.hash.substr(1)) : false,
 numChars: 250,
 thumbWidth: 36,
 navText: "Berikutnya ▼",
 frontText: "Atas ▲",
 noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9bpZQngvl1wAQGaxeyo_FJetVLF_qpYhF4Y5FGo_KEzLdtAjsVVGEgEtbgOi0KN18H9cXxD9OjHU68K42IQnNC8e5Co_w29OutJGsNtJdjjAuKQ_LDOcj86a0Q_lLBqqKOToSIxPwleCd/s1600/manfaat-kopi-untuk-kulit+copy.png",
 loading: "<span>Memuat...</span>",
 searching: "<span>Mencari...</span>",
 noResult: "Tidak Ditemukan"
};
</script>

</div>

Terima Kasih untuk :
mas Malik : teafuhaje.net/2014/07/cara-membuat-daftar-isi-di-blog-dengan.html
mas Pandu : panduaji.net/2014/09/cara-membuat-daftar-isi-di-blog.html

Atau gunakan kode dibawah ini jika kode diatas tidak bekerja.

DEMO