Pembuatan Sortir Table pada Sitemap Blog
Modifikasi dalam sebuah blog bisa kita terapkan dalam berbagai elemen blog, tergantung dari bagaimana kita mau memulainya. Seperti halnya ini, penerapan tabel sorter yang dilakukan merupakan modifikasi dari sebuah table sorter yang pernah Admin tuliskan sebelumnya.
Integrasi Widget ke Blogger
Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:
Salin kode di bawah ini kemudian letakkan di dalam formulirnya:
<style type="text/css">
.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
}
</style>
<div id="toc-container">Memuat...</div>
<script>
// Original code: https://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>',
month = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'],
z = '',
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;
z = '<time datetime="' + e + '" title="' + e + '">' + e.substring(8, 10) + ' ' + month[parseInt(e.substring(5, 7), 10) - 1] + ' ' + e.substring(0, 4) + '</time>'
f += '<tr><td><a href="' + b + '" title="' + d + '">' + d + '</a></td><td>' + z + '</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 = "https://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=generateTOC";
h.appendChild(s);
})();
</script>
1 comments
At Sands Casino, we are proud 바카라 to offer our guests a wide variety of septcasino exciting gaming options that include the all new Vegas 바카라 style slots,