1. Masuk ke Menu utama blogger
2. Klik Page (halaman baru) atau Post (Posting baru)
3. Klik Add Newpage atau NewPost
4. Buatlah Posting baru dengan judul "Daftar Isi"
5. Klik pada tampilan "HTML View"
6. Copy and paste kode dibawah ini

    <style>

    p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}

    a.post-titles {}

    ol li{list-style-type:decimal;line-height:25px;}

    </style><br />

    <script>

    //<![CDATA[

    var postTitle=new Array();var postUrl=new Array();var postLabels=new Array();var postRecent=new Array();function sitemaplabel(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postUrl[ii]=j;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2()}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var c="Category";var j="";if(postFilter!=""){j="Click to view all"};if(l==postTitle.length)var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">Baru!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}};

    //]]>

    </script><br />

    <script src="https://www.hdesignideas.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=sitemaplabel"></script>

1. Masuk ke Menu utama blogger
2. Klik Page (halaman baru) atau Post (Posting baru)
3. Klik Add Newpage atau NewPost
4. Buatlah Posting baru dengan judul "Daftar Isi"
5. Klik pada tampilan "HTML View"
6. Copy and paste kode dibawah ini

<div id="table-outer"><table><tbody>

<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>

<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>

<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher"><input type="text" /></form></td></tr>

</tbody></table></div><header id="resultDesc"></header><br />

<ul id="feedContainer"></ul><div id="feedNav">Loading...</div><script type="text/javascript">

/**

 * Advanced Blogger TOC Script by Taufik Nurrohman

 * URL: https://plus.google.com/108949996304093815163/about

 */

var tocConfig = {

    url: "",

    feedNum: 6,

    labelName: (window.location.hash && window.location.hash != "#0" && window.location.hash != "#search") ? encodeURIComponent(window.location.hash.substr(1)) : false,

    numChars: 140,

    thumbWidth: 0,

    navText: "Load More &#9660;",

    frontText: "Top &uArr;",

    noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",

    loading: "<span>Loading...</span>",

    searching: "<span>Searching...</span>",

    MonthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"],

    noResult: "No Result"

};

function getID(b) {

    return document.getElementById(b)

}

var head = document.getElementsByTagName("head")[0],

    tocContainer = getID("feedContainer"),

    feedNav = getID("feedNav"),

    orderByer = getID("orderFeedBy"),

    labelSorter = getID("labelSorter"),

    input = getID("postSearcher").getElementsByTagName("input")[0],

    resultDesc = getID("resultDesc"),

    nextPage, feedArchive, startPage = 0;

function cropFeed(d, c) {

    var f = d.split("<");

    for (var e = 0; e < f.length; e++) {

        if (f[e].indexOf(">") != -1) {

            f[e] = f[e].substring(f[e].indexOf(">") + 1, f[e].length)

        }

    }

    f = f.join(" ");

    f = f.substring(0, c - 1);

    return f

}

function showLabels(c) {

    var a = c.feed.category,

        d = "";

    d = "<select id='labelSorter' onchange='changeSort(this.value);'>";

    d += "<option value='' selected>CATEGORY...</option>";

    for (var b = 0; b < a.length; b++) {

        d += "<option value='" + decodeURIComponent(a[b].term) + "'>" + a[b].term.toUpperCase() + "</option>"

    }

    d += "</select>";

    labelSorter.innerHTML = d

}

function showFeedList(t) {

    var m = t.feed.entry,

        o, s, n, h, e, u, g, p, r, q, c = "";

    if (typeof (t.feed.entry) !== "undefined") {

        for (var f = 0; f < tocConfig.feedNum; f++) {

            o = (m) ? m[f] : "", nextPage = "";

            if (f == t.feed.entry.length) {

                break

            }

            s = o.title.$t;

            for (var d = 0; d < o.link.length; d++) {

                if (o.link[d].rel == "alternate") {

                    n = o.link[d].href;

                    break

                }

            }

            for (var b = 0; b < t.feed.link.length; b++) {

                if (t.feed.link[b].rel == "next") {

                    nextPage = t.feed.link[b].href

                }

            }

            for (var a = 0; a < o.link.length; a++) {

                if (o.link[a].rel == "replies" && o.link[a].type == "text/html") {

                    q = o.link[a].title;

                    break

                }

            }

            if ("content" in o) {

                e = o.content.$t

            } else {

                if ("summary" in o) {

                    e = o.summary.$t

                } else {

                    e = ""

                }

            }

            if ("media$thumbnail" in o) {

                h = o.media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s" + tocConfig.thumbWidth + "-c")

            } else {

                h = tocConfig.noImage.replace(/\/s[0-9]+\-c/, "/s" + tocConfig.thumbWidth + "-c")

            }

            postdate = o.published.$t.substring(0, 10), u = postdate.substring(0, 4), g = postdate.substring(5, 7), p = postdate.substring(8, 10), r = tocConfig.MonthNames[parseInt(g, 10) - 1];

            c += "<li><div class='inner'>";

            c += "<a href='" + n + "' target='_blank'><img style='width:" + tocConfig.thumbWidth + "px;height:" + tocConfig.thumbWidth + "px;' src='" + h + "' alt='" + s + "' /></a>";

            c += "<a class='toc-title' href='" + n + "' target='_blank'>" + s + "</a><strong> - (" + q + ")</strong><br>";

            c += "<div class='news-text'>" + cropFeed(e, tocConfig.numChars) + "&hellip;<br style='clear:both;'/></div>";

            c += '<div class="date"><span class="dd">' + p + '</span><span class="dm">' + r + '</span><span class="dy">' + u + "</span></div></div></li>"

        }

        if (input.value !== "" && window.location.hash == "#search") {

            resultDesc.innerHTML = "<span>Search result for keyword <strong>&quot;" + input.value + "&quot;</strong></span>"

        } else {

            resultDesc.innerHTML = ""

        }

        feedContainer.innerHTML += c;

        if (nextPage) {

            if (window.location.hash && window.location.hash !== "#0") {

                c = "<a href='javascript:initResult(2);' class='next'>" + tocConfig.navText + "</a>"

            } else {

                c = "<a href='javascript:initResult(1);' class='next'>" + tocConfig.navText + "</a>"

            }

        } else {

            c = "<a href='#table-outer' onclick='jQuery(&apos;html, body&apos;).animate({scrollTop: jQuery(&apos;#table-outer&apos;).offset().top}, 1500); return false' class='front'>" + tocConfig.frontText + "</a>"

        }

        feedNav.innerHTML = c;

        input.value = "";

        labelSorter.getElementsByTagName("select")[0].removeAttribute("disabled");

        orderByer.removeAttribute("disabled")

    } else {

        feedContainer.innerHTML = "";

        alert(tocConfig.noResult);

        feedNav.innerHTML = "<a href='?reload=true'>" + tocConfig.frontText + "</a>";

        searchDesc.innerHTML = ""

    }

}

function initResult(a) {

    var b, c;

    if (a == 1) {

        b = nextPage.indexOf("?");

        c = nextPage.substring(b)

    } else {

        if (a == 2) {

            b = nextPage.indexOf("?");

            c = nextPage.substring(b).replace(/\?/, "/-/" + window.location.hash.substr(1) + "?")

        } else {

            c = "?start-index=1&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&alt=json-in-script"

        }

    }

    c += "&callback=showFeedList";

    updateScript(c)

}

function removeScript() {

    var a = getID("temporer-script");

    a.parentNode.removeChild(a)

}

function buildLabels() {

    var a = document.createElement("script");

    a.type = "text/javascript";

    a.src = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels";

    head.appendChild(a)

}

function updateScript(b) {

    if (startPage == 1) {

        removeScript()

    }

    feedNav.innerHTML = tocConfig.loading;

    if (tocConfig.labelName !== false) {

        feedArchive = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary/-/" + tocConfig.labelName + b

    } else {

        feedArchive = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary" + b

    }

    var a = document.createElement("script");

    a.type = "text/javascript";

    a.src = feedArchive;

    a.id = "temporer-script";

    head.appendChild(a);

    startPage = 1

}

function changeSort(c) {

    removeScript();

    tocContainer.innerHTML = "";

    feedNav.innerHTML = tocConfig.loading;

    var b = document.createElement("script"),

        d = labelSorter.getElementsByTagName("select")[0],

        a = (c !== 0) ? "/-/" + c : "";

    b.type = "text/javascript";

    b.id = "temporer-script";

    b.src = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary" + a + "?alt=json-in-script&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&callback=showFeedList";

    head.appendChild(b);

    d.disabled = true;

    orderByer.disabled = true;

    window.location.hash = c

}

function searchPost() {

    removeScript();

    tocContainer.innerHTML = "";

    resultDesc.innerHTML = "";

    feedNav.innerHTML = tocConfig.searching;

    var a = document.createElement("script");

    a.type = "text/javascript";

    a.id = "temporer-script";

    a.src = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary?alt=json-in-script&orderby=published&q=" + input.value + "&max-results=9999&callback=showFeedList";

    head.appendChild(a);

    window.location.hash = "#search";

    return false

}

getID("postSearcher").onsubmit = function () {

    return searchPost()

};

orderByer.onchange = function () {

    changeSort(0)

};

labelSorter.getElementsByTagName("select")[0].onchange = function () {

    changeSort(this.value)

};

window.onload = function () {

    initResult(0);

    buildLabels();

    window.location.hash = "#0"

};

</script><br />

<style scoped="" type="text/css">

#comments {display:none;}

</style>