<div id="toc-container">Memuat...</div>
// Original code: http://stackoverflow.com/a/14268260/1163000
// Usage: `makeSortable(elem);`
(function () {
function sortTable(table, col, reverse) {
var tb = table.tBodies[0], // Use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
tr = Array.prototype.slice.call(tb.rows, 0); // Put rows into array
reverse = -((+reverse) || -1);
tr = tr.sort(function (a, b) { // Sort rows
return reverse * (a.cells[col].textContent.trim().localeCompare(b.cells[col].textContent.trim()));
});
for (var i = 0, len = tr.length; i < len; ++i) {
tb.appendChild(tr[i]); // Append each row in order
}
}
function makeSortable(table) {
var th = table.tHead,
i;
th && (th = th.rows[0]) && (th = th.cells);
if (th) {
i = th.length;
} else {
return; // If no `<thead>` then do nothing
}
while (--i >= 0)(function (i) {
var dir = 1;
th[i].onmousedown = function () {
for (var j = 0, jen = th.length; j < jen; ++j) {
th[j].className = th[j].className.replace(/(^| )desc|asc( |$)/g, "$1$2");
}
sortTable(table, i, (dir = 1 - dir));
this.className += dir === 1 ? " desc" : " asc";
return false;
};
}(i));
}
window.makeSortable = makeSortable;
})();
// Fungsi untuk membuat Tabel Konten dengan JSON Blogger
function generateTOC(json) {
var a = json.feed.entry,
b, c, d, e, f = '<table class="table-sortable"><thead><tr><th>Judul Posting</th><th>Tanggal Terbit</th><th>Jumlah Komentar</th></tr></thead><tbody>',
g = document.getElementById('toc-container');
for (var i = 0, len = a.length; i < len; ++i) {
for (var j = 0, jen = a[i].link.length; j < jen; ++j) {
if (a[i].link[j].rel == "alternate") {
b = a[i].link[j].href;
break;
}
}
for (var k = 0, ken = a[i].link.length; k < ken; ++k) {
if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
c = a[i].link[k].title;
break;
}
}
d = a[i].title.$t;
e = a[i].published.$t;
f += '<tr><td><a href="' + b + '" title="' + d + '">' + d + '</a></td><td>' + e + '</td><td>' + c + '</td></tr>';
}
f += '</tbody></table>';
g.innerHTML = f;
// Picu fungsi `makeSortable` setelah markup HTML terinjeksi ke `#toc-container`
makeSortable(g.children[0]);
}
// Skrip asinkron untuk memanggil feed dan memicu fungsi `generateTOC`
(function () {
var h = document.getElementsByTagName('head')[0],
s = document.createElement('script');
s.src = "http://dte-feed.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=generateTOC";
h.appendChild(s);
})();
body {
margin:0;
padding:10px;
background-color:aliceblue;
}
.table-sortable {
border-collapse:collapse;
table-layout:fixed;
width:100%;
font:normal normal 13px/1.4 Arial, Sans-Serif;
color:black;
background-color:white;
}
.table-sortable th, .table-sortable td {
margin:0;
padding:5px 8px;
border:none;
vertical-align:top;
text-align:left;
}
.table-sortable th {
font-weight:bold;
background-color:slategray;
color:white;
border-color:white;
}
.table-sortable tbody tr:nth-child(even) {
background-color:whitesmoke
}
.table-sortable th {
cursor:pointer
}
th.asc, th.desc {
background-color:lightslategray
}
th.asc:before, th.desc:before {
content:"";
display:block;
float:right;
width:0;
height:0;
border:.4em solid transparent;
}
th.asc:before {
border-bottom-color:inherit;
border-top-width:0;
margin-top:.4em;
}
th.desc:before {
border-top-color:inherit;
border-bottom-width:0;
margin-top:.5em;
}
.table-sortable a {
color:teal;
text-decoration:none;
font-weight:bold;
}
.table-sortable a:hover {
text-decoration:underline
}