Blogger JSON · Content List Base

<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<title>Blogger Table of Contents</title>
<script>
/**
 * CONTENT LIST
 *
 * Created by    : Copycat91 On July 30th 2009
 * Website       : http://infotentangblog.blogspot.com/
 * Original post : http://infotentangblog.blogspot.com/2009/08/membuat-daftar-isi-blog.html
 *
 * Special thanks to :
 *     *) http://www.blogger.com for the free blog hosting
 *     *) http://buzz.blogger.com for the tutorial to convert feed->json
 *     *) NetBeans IDE 6.5 for the free IDE
 *     *) And other tutorials about HTML, javascript, json, etc I have read
 */

var all_entries, entries, all_labels = [], json;
function createEntries(json) {
    var entries_obj_list = [];
    var entries = json.feed.entry;
    for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var entry_obj = new Object;
        entry_obj.id = entry.id.$t;
        entry_obj.title = entry.title.$t;
        entry_obj.href = getEntryHref(entry);
        entry_obj.content = getEntryContent(entry);
        entry_obj.labels = getEntryLabels(entry);
        entry_obj.published = entry.published.$t.substr(0, 10);
        entries_obj_list.push(entry_obj);
    }
    return entries_obj_list;
}

function getEntryById(id) {
    for (var i = 0; i < all_entries.length; i++) {
        if (all_entries[i].id == id) {
            return all_entries[i];
        }
    }
    return null;
}

function getEntryContent(entry) {
    return entry.content ? entry.content.$t : entry.summary.$t;
}

function getEntryHref(entry) {
    var links = entry.link;
    for (var i = 0; i < links.length; i++) {
        if (links[i].rel == "alternate") {
            return links[i].href;
        }
    }
    return null;
}

function getEntryLabels(entry) {
    var labels = [];
    var categories = entry.category;
    if (!categories) {
        return labels;
    }
    for (var i = 0; i < categories.length; i++) {
        var label = categories[i].term;
        if (!isExists(all_labels, label)) {
            all_labels.push(label);
        } // while collecting all labels
        labels.push(label);
    }
    return labels;
}

function getSomeEntries(cmp) {
    entries = [];
    for (var i = 0; i < all_entries.length; i++) {
        var entry = all_entries[i];
        if (cmp(entry)) {
            entries.push(entry);
        }
    }
    return entries;
}

function isExists(array, val) {
    for (var i = 0; i < array.length; i++) {
        if (array[i] == val) {
            return true;
        }
    }
    return false;
}

function onLoadFeed(json_arg) {
    json = json_arg;
    setTimeout("onLoadFeedTimeout()", 100);
}

function onLoadFeedTimeout() {
    entries = createEntries(json);
    all_entries = entries;
    showHeaderOption();
    showEntries(entries);
}

function showEntries(entries) {
    var s = "";
    for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];
        s += "<p>";
        s += titleCode(entry);
        s += "<span style='font-size:80%;'>" + footlabel + " " + labelsCode(entry);
        s += " " + footon + " " + publishedDateCode(entry) + "</span>";
        s += "</p>";
    }
    document.getElementById("cl_content_list").innerHTML = s;
}

function showHeaderOption() {
    var s = "";
    s += "<table cellpadding='3'>";
    s += "<tr>";
    s += "<td style='text-align:right;'>" + sortby;
    s += "<td><select onchange='sortBy(this.value.substr(1), this.value.substr(0,1))' style='width:100%;'>";
    s += "<option value='0published'>" + timepub + "</option>";
    s += "<option value='1title'>" + ptitle + "</option>";
    s += "</select>";
    s += "<tr>";
    s += "<td style='text-align:right'>" + labelsort;
    s += "<td><select onchange='showPostsWLabel(this.value)' id='cl_labels' style='width:100%;'>";
    s += "<option value='*'>" + showall + "</option>";
    for (var i = 0; i < all_labels.length; i++) {
        var label = all_labels[i];
        s += "<option value='" + label + "'>" + label + "</option>";
    }
    s += "</select>";
    s += "<tr>";
    s += "<td><td><button onclick='showPostsWLabel(\"*\");'>" + showall + "</button>";
    s += "</table>";
    document.getElementById("cl_option").innerHTML = s;
}

function shortenContent(entry) {
    var content = entry.content;
    content = stripHTML(content);
    if (content.length > cl_summlen) {
        content = content.substr(0, cl_summlen);
        if (content.charAt(content.length - 1) != " ") {
            content = content.substr(0, content.lastIndexOf(" ") + 1);
        }
        content += "...";
    }
    entry.content = content;
    return content;
}

function showHideSummary(obj) {
    var p = obj.nextSibling;
    while (p.className != "cl_content") {
        p = p.nextSibling;
    }
    var id = p.id;
    var entry = getEntryById(id);
    var content = shortenContent(entry);
    if (p.innerHTML == "") {
        p.innerHTML = content + "<br/>";
        obj.innerHTML = "&#9660;";
        obj.title = hidesum;
    } else {
        p.innerHTML = "";
        obj.innerHTML = "&#9658;";
        obj.title = showsum;
    }
}

function sortBy(attribute, asc) {
    var cmp = function(entry1, entry2) {
        if (entry1[attribute] == entry2[attribute]) {
            return 0;
        }
        else if (asc == '1') {
            return entry1[attribute].toLowerCase() > entry2[attribute].toLowerCase();
        }
        else {
            return entry1[attribute].toLowerCase() < entry2[attribute].toLowerCase();
        }
    }
    entries.sort(cmp);
    showEntries(entries);
}

function stripHTML(s) {
    var c;
    var intag = false;
    var newstr = "";
    for (var i = 0; i < s.length; i++) {
        c = s.charAt(i);
        if (c == "<") {
            intag = true;
        }
        else if (c == ">") {
            intag = false;
        }
        if (c == ">") {
            newstr += " ";
        }
        else if (!intag) {
            newstr += c;
        }
    }
    return newstr;
}

// Functions Returning HTML Code
function labelsCode(entry) {
    var s = "";
    if (entry.labels.length == 0) {
        return " (tidak berlabel) ";
    }
    for (var j = 0; j < entry.labels.length; j++) {
        var label = entry.labels[j];
        s += "<a href='javascript:showPostsWLabel(\"" + label + "\")' ";
        s += "title='" + showlabel + " " + label + "'>" + label + "</a>";
        s += (j != entry.labels.length - 1) ? ", " : "";
    }
    return s;
}

function publishedDateCode(entry) {
    var y = entry.published.substr(0, 4);
    var m = entry.published.substr(5, 2);
    var d = entry.published.substr(8, 2);
    var s = "<a href='javascript:showPostsInDate(\"" + y + "\")' title='" + y + "'>" + y + "</a>/";
    s += "<a href='javascript:showPostsInDate(\"" + y + "-" + m + "\")' title='" + y + "/" + m + "'>" + m + "</a>/";
    s += "<a href='javascript:showPostsInDate(\"" + y + "-" + m + "-" + d + "\")'title='" + y + "/" + m + "/" + d + "'>" + d + "</a>";
    return s;
}

function titleCode(entry) {
    var s = "<span title='" + showsum + "' onclick='showHideSummary(this)' style='cursor:pointer'>&#9658;</span> ";
    s += "<b><a href='" + entry.href + "'>" + entry.title + "</a></b><br/>";
    s += "<span class='cl_content' id='" + entry.id + "'></span>";
    return s;
}

// Selection Functions
function showPostsInDate(date) {
    var cmp = function(entry) {
        return entry.published.indexOf(date) == 0;
    }
    var entries = getSomeEntries(cmp);
    showEntries(entries);
}

function showPostsWLabel(label) {
    var cmp = function(entry) {
        if (label == "*") {
            return true;
        }
        for (var i = 0; i < entry.labels.length; i++) {
            if (entry.labels[i] == label) {
                return true;
            }
        }
        return false;
    }
    var entries = getSomeEntries(cmp);
    showEntries(entries);
    document.getElementById("cl_labels").value = label;
}

</script>
</head>
<body>
<div id="cl_option">Loading...</div>
<div id="cl_content_list"></div>
<script>
var cl_summlen = 500,
    timepub    = "Tanggal Publikasi",
    ptitle     = "Judul Artikel",
    sortby     = "Urut berdasarkan:",
    labelsort  = "Filter artikel dengan label:",
    showall    = "Lihat Semua",
    hidesum    = "Sembunyikan Rangkuman...",
    showsum    = "Tampilkan Rangkuman...",
    footlabel  = "Kategori:",
    footon     = "di",
    showlabel  = "Lihat posing dengan label";
</script>
<script src="//dte-feed.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=9999"></script>
</body>
</html>

8 Komentar

  • Putra

    apa ini mas?? cuman kode doank :p

  • Beben Koben

    dah pensiun master infotentangblog :p
    sy jg lg anteung lihat2 kreasi canvas, maknyus² :D

  • Taufik Nurrohman

    @Beben Koben Daripada menulis tutorial yang tidak didasari dengan niat, lebih baik bersantai dulu mencari-cari barang bagus, lalu di simpan/didokumentasikan di sini untuk menghilangkan stress. Lagipula ini juga penemuan-penemuan penting. Sayang kalau tidak didokumentasikan. Sebelum developernya menghapus proyeknya hehe...

  • MUX SPARROW

    Mantap, Gan..! :-bd Btw, ada cara gak supaya jarak spasi ke bawah antarjudul agak renggang?

  • Taufik Nurrohman

    @MUXLIMO Tepat di samping kode </p>, tambahkan tag <br /> sesuka hati:

    function showEntries(entries) {
    var s = "";
    for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    s += "<p>";
    s += titleCode(entry);
    s += "<span style='font-size:80%;'>" + footlabel + " " + labelsCode(entry);
    s += " " + footon + " " + publishedDateCode(entry) + "</span>";
    s += "</p><br /><br /><br /><br />";
    }
    ...
  • MUX SPARROW

    @Taufik Nurrohman

    ajeb, Gan! :-bd ay lop yu bangat dah! <3 :D

  • Irrafeisal

    gimana buat daftar isi buku seperti di blog ini??? terimakasih

  • Unknown

    gan bisa di tambah dengan sistem searc ngga untuk di kasus ini ?

Komentar telah ditutup.