<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<title>Blogger Table of Contents</title>
<script type="text/javascript">
/**
* 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 border='0' 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 = "▼";
obj.title = hidesum;
} else {
p.innerHTML = "";
obj.innerHTML = "►";
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'>►</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 type="text/javascript">
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="http://hompimpaalaihumgambreng.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=9999"></script>
</body>
</html>Blogger JSON - Content List Base
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website
0 comments:
Post a Comment