Pembuatan Sortir Table pada Sitemap Blog

Thursday, October 9, 2014

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.

Coba Sendiri

Integrasi Widget ke Blogger

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Menambahkan halaman statis baru

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>

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini