Daftar Isi versi JSON ala DTE
Daftar isi versi JSON ala DTE ini saya dapatkan di blog DTE.web.id dan code yang terdapat di bawah ini murni saya kutip dari blog tersebut tanpa merubah sedikitpun code script yang terdapat di dalamnya.
Judul asli di blog tersebut BLOGGER JSON- Content List Base anda dapat kunjugi link tersebut disini DTE
untuk menggunakannaya silahkan sobat paste kode tersebut pada halaman dan pilih di bagian HTML, kemudian simpan dan silahkan sobat lihat hasilnya
Judul asli di blog tersebut BLOGGER JSON- Content List Base anda dapat kunjugi link tersebut disini DTE
<!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>untuk menggunakannaya silahkan sobat paste kode tersebut pada halaman dan pilih di bagian HTML, kemudian simpan dan silahkan sobat lihat hasilnya
Comments
Post a Comment