JSFiddle: Tabel Konten Blogger dengan Pilihan Sortir + Komentar

https://example.com/style.css X

#tocTable {
  border:2px solid white;
  font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse;
  text-align:left;
  margin:0 auto 5px;
}
#tocTable th,
#tocTable td {
  border:1px solid white;
  background-color:#fafafa;
  padding:10px 15px;
}
#tocTable th {
  background-color:#5d5d5d;
  font-weight:bold;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
  width:55%;
  background-color:#5A930D;
}
#th-2,#th-3,#th-4 {width:15%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
  padding:0 !important;
  background-color:#2372A7;
}
#tocTable td.toc-header-col-3,#tocTable td.toc-header-col-4 {background-color:#D7DEF0}
#tocTable a {
  display:block;
  text-decoration:none;
  color:white;
  padding:10px 15px;
  background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
  display:block;
  width:220px;
  font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  cursor:pointer;
  border:none;
  outline:none;
  background-color:#eee;
  margin:0px auto 5px;
  padding:5px;
}

https://example.com/script.js X

var theTotalPosts = 9999, // Tentukan jumlah maksimal posting
    theOptions = "Sortir...", // Label opsi 1
    theSortPosts = "Sortir berdasarkan Abjad", // Label opsi 2
    theSortLabels = "Sortir berdasarkan Label", // Label opsi 3
    theTitles = "Judul Artikel", // Header tabel 1
    theLabels = "Label Artikel", // Header tabel 2
    theDates = "Bulan Terbit", // Header tabel 3
    theComment = "Jumlah Komentar", // Header tabel 4
    theBlankLabels = "Tak Berlabel", // Label kosong
    theSiteUrl = "https://idtutorplus.blogspot.com", // URL blog kamu
    theConfig = "toc-container",
    theCmtext = "Komentar";

// Original: https://www.threelas.com
// Modified by Id Tutor Plus(https://idtutorplus.blogspot.com)

function toc_sort_table(a) {
    var post = [],
        label = [],
        timepub = [],
        skeleton = "",
        g = document.getElementById(theConfig),
        b = a.feed.openSearch$totalResults.$t;
    if (b < theTotalPosts) theTotalPosts = b - 1;
    for (var c = 0; c <= theTotalPosts; c++) {
        post[c] = a.feed.entry[c].title.$t;
        label[c] = a.feed.entry[c].category[0].term;
        timepub[c] = a.feed.entry[c].published.$t.substring(0, 10);
    }
    var d = [];
    var cmnum = [];
    for (var c = 0; c <= theTotalPosts; c++) {
        for (var e = 0; e <= a.feed.entry[c].link.length - 1; e++) {
            if (a.feed.entry[c].link[e].rel == "alternate") {
                d[c] = a.feed.entry[c].link[e].href;
                break;
            }
        }
        for (var l = 0; l <= a.feed.entry[c].link.length - 1; l++) {
            if (a.feed.entry[c].link[l].rel == "replies" && a.feed.entry[c].link[l].type == "text/html") {
                cmnum[c] = a.feed.entry[c].link[l].title.split(" ")[0];
                break;
            }
        }
    }
    
    skeleton = '<select id="tocSort" onchange="displayMessage(this.options[this.selectedIndex].value);"><option value="0">' + theOptions + '</option><option value="0">' + theSortPosts + '</option><option value="1">' + theSortLabels + '</option></select>';
    skeleton += '<table border="1" id="tocTable"><thead><tr><th id="th-1">' + theTitles + '</th><th id="th-2">' + theLabels + '<th id="th-3">' + theDates + '</th><th id="th-4">' + theComment + '</th>';
    skeleton += '</tr></thead>';
    skeleton += '<tbody id="toc-09957862729274943614">'; // Unique ID doh...
    for (var c = 0; c <= theTotalPosts; c++) {
        if (a.feed.entry[c].category.length >= 1) {
            for (var e = 0; e <= a.feed.entry[c].category.length - 1; e++) {
                skeleton += '<tr>';
                skeleton += '<td class="toc-header-col-1">' + '<a href="' + d[c] + '" target="_blank">' + post[c] + "</a>" + '</td>';
                skeleton += '<td class="toc-header-col-2">' + '<a href="' + theSiteUrl + "/search/label/" + a.feed.entry[c].category[e].term + '" target="_blank">' + a.feed.entry[c].category[e].term + "</a>" + '</td>';
                skeleton += '<td class="toc-header-col-3">' + timepub[c] + '</td>';
                skeleton += '<td class="toc-header-col-4">' + cmnum[c] + ' ' + theCmtext + '</td>';
                skeleton += '</tr>';
            }
        } else {
            skeleton += '<tr>';
            skeleton += '<td class="toc-header-col-1">' + '<a href="' + d + '" target="_blank">' + post[c] + "</a>" + '</td>';
            skeleton += '<td class="toc-header-col-2">' + theBlankLabels + '</td>';
            skeleton += '<td class="toc-header-col-3">' + timepub[c] + '</td>';
            skeleton += '<td class="toc-header-col-4">' + cmnum[c] + ' ' + theCmtext + '</td>';
            skeleton += '</tr>';
        }
    }
    skeleton += '</tbody>';
    skeleton += '</table><div style="text-align:right;"><a href="https://idtutorplus.blogspot.com" target="_blank" style="font:normal bold 8px/normal Arial,Sans-Serif;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.2);" title="Id Tutor Plus">ITP +]</a></div>';
    g.innerHTML = skeleton;
}

function getTextValue(a) {
    var b, c = "";
    for (b = 0; b < a.childNodes.length; b++) {
        if (a.childNodes[b].nodeType == document.TEXT_NODE) {
            c += a.childNodes[b].nodeValue;
        } else if (a.childNodes[b].nodeType == document.ELEMENT_NODE && a.childNodes[b].tagName == "BR") {
            c += " ";
        } else {
            c += getTextValue(a.childNodes[b]);
        }
    }
    return normalizeString(c);
}

function normalizeString(a) {
    var whtSpEnds = new RegExp("^\\s*|\\s*$", "g"),
        whtSpMult = new RegExp("\\s\\s+", "g");
    a = a.replace(whtSpMult, " ").replace(whtSpEnds, "");
    return a;
}

function compareValues(a, b) {
    var c = parseFloat(a),
        d = parseFloat(b);
    if (!isNaN(c) && !isNaN(d)) {
        a = c;
        b = d;
    }
    if (a == b) return 0;
    if (a > b) return 1;
    return -1;
}

function displayMessage(a) {
    var b = document.getElementById("toc-09957862729274943614");
    if (b.reverseSort == null) b.reverseSort = [];
    if (a == b.lastColumn) b.reverseSort[a] = !b.reverseSort[a];
    b.lastColumn = a;
    var c = b.style.display;
    b.style.display = "none";
    var d, e, f, g, h, i, j;
    for (e = 0; e < b.rows.length - 1; e++) {
        h = e;
        g = getTextValue(b.rows[e].cells[a]);
        for (f = e + 1; f < b.rows.length; f++) {
            i = getTextValue(b.rows[f].cells[a]);
            j = compareValues(g, i);
            if (b.reverseSort[a]) j = -j;
            if (j > 0) {
                h = f;
                g = i;
            }
        }
        if (h > e) {
            d = b.removeChild(b.rows[h]);
            b.insertBefore(d, b.rows[e]);
        }
    }
    b.style.display = c;
    return false;
}

if (document.ELEMENT_NODE == null) {
    document.ELEMENT_NODE = 1;
    document.TEXT_NODE = 3;
}

(function () {
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('script');
    s.src = "" + theSiteUrl.replace(/\/$/, "") + "/feeds/posts/summary?max-results=" + theTotalPosts + "&alt=json-in-script&orderby=published&callback=toc_sort_table";
    h.appendChild(s);
})();