Make Calendar Archived Post List for Blogger

Pada waktu selasa, 8 juli 2008 master Lvchen blogger dari china telah melakukan update hack AJAX arsip calendar buat blogger! Dahulu tampilan arsip full berbentuk kalender dengan tanggal sebagai link postingan tujuan. Sekarang diperbaharui dengan penambahan tampilan berupa list judul postingan b-) Lihat bagian pojok bawah kiri blog ini. Murni memakai JavaScript and metode pemasukan ke dalam blog yaitu metode Add Gadget ► HTML/Javascript.
Langsung saja bro...

<div id="blogCalendar"></div>
<script src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js" type="text/javascript"></script>
<script type="text/javascript">
Calendar.base='YourBlogName.blogspot.com';
Calendar.timeZone='+07'; //Time Zone Indonesia
Calendar.drawTable();
</script>

Gantikan YourBlogName dengan alamat blog sobat, ingat tanpa http:// Script bisa kalian hostingkan sendiri. Jika mau melihat pecahan script calender silahkan

Click to look scripts

function ArchiveCalendar() {
this.PrevMonth = PrevMonth;
this.NextMonth = NextMonth;
this.refreshTable = refreshTable;
this.drawTable = drawTable;
this.Calendar = Calendar;
this.fetchposts = fetchposts;
this.addLink = addLink;
this.monthTable = monthTable;
this.yearTable = yearTable;
this.toggleTOC = toggleTOC;
this.drawTOCTable = drawTOCTable;
this.gainControl = gainControl;
this.sortTable = sortTable;
this.alreadyrunflag = 0;
this.week_label = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
this.month_label_real = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
this.month_label = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
this.month_days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.today = new Date();
this.cur_day = new Date();
this.startDay = 0;
this.base = 'lvchen.blogspot.com';
this.timeZone = '+08:00';
this.timeZoneCheck = false;
this.alignFooter = true;
this.todayMsg = 'Today';
this.showTOC = new Array('List', 'Calendar');
this.listMode = false;
this.loading = '<img src="http://3.bp.blogspot.com/-3BP3tHg7lFc/UEKDOx4BjZI/AAAAAAAAAZs/xzsbHzOi4Tk/s16/ajax-loader.jpg"></img>';
this.tableColor = 'white'
}
function Calendar(a) {
var b = a.getFullYear();
var c = Calendar.month_label[a.getMonth()] + '';
var d = Calendar.month_days[a.getMonth()];
var e = Calendar.today.getDate();
if (a.getMonth() == 1 && (((b % 4 == 0) && (b % 100 != 0)) || (b % 400 == 0))) {
d = 29;
Calendar.month_days[1] = '29'
} else Calendar.month_days[1] = '28';
Calendar.startDay = a.getDay();
var f = '';
f += '<table style="text-align:center;" align="center" cellspacing="0">';
f += '<tr>';
for (var g = 0; g < 7; g++) {
f += '<th>' + Calendar.week_label[g] + '</th>'
}
f += '</tr>';
var h = 0;
for (g = 0; g < Calendar.startDay; g++) {
if (h == 0) f += '<tr>';
f += '<td class="Lastday">&nbsp;</td>';
h++
}
for (g = 1; g <= d; g++) {
if (h == 0) f += '<tr>';
if (g == e && a.getMonth() == Calendar.today.getMonth() && b == Calendar.today.getFullYear()) f += '<td class="Today">' + g + '</td>';
else f += '<td class="Lastday">' + g + '</td>';
if (h == 6) {
f += '</tr>';
h = 0
} else h++
}
if (h > 0) {
for (var i = 0; i < (7 - h); i++) {
f += '<td class="Lastday">&nbsp;</td>'
}
f += '</tr>'
}
f += '</table>';
return f
}
function fetchposts(a, b, c) {
var d = document.getElementById('jsonPosts');
if (d != undefined) document.documentElement.firstChild.removeChild(d);
if (b == 11) {
var e = '01';
var f = a + 1
} else {
var e = Calendar.month_label[b + 1];
var f = a
}
var g = 'published-min=' + a + '-' + Calendar.month_label[b] + '-01T00%3A00%3A00' + Calendar.timeZone + '&published-max=' + f + '-' + e + '-01T00%3A00%3A00' + Calendar.timeZone + '&max-results=35&start-index=' + c;
var h = document.createElement('script');
if (!Calendar.listMode) var i = 'http://' + Calendar.base + '/feeds/posts/summary?alt=json-in-script&callback=Calendar.addLink&' + g;
else var i = 'http://' + Calendar.base + '/feeds/posts/summary?alt=json-in-script&callback=Calendar.drawTOCTable&' + g;
h.setAttribute('src', i);
h.setAttribute('id', 'jsonPosts');
h.setAttribute('type', 'text/javascript');
document.getElementsByTagName('HEAD')[0].appendChild(h)
}
function addLink(a) {
var b = document.getElementById('CalendarTable');
var c = a.feed.entry;
var d = '';
var e = Calendar.timeZone;
if (c != undefined) {
var f = b.getElementsByTagName('td');
for (var i = 0; i < c.length; i++) {
var g = c[i].published.$t.substr(0, 10);
var h = g.substr(8, 2);
var k = f[Calendar.startDay + (parseInt(h, 10) - 1)];
var l = c[i].title.$t;
var j = 0;
while (j < c[i].link.length && c[i].link[j].rel != 'alternate') j++;
var m = j;
if (h == d) {
var n = k.firstChild;
var o = n.getAttribute('href');
var p = o.match(/(max-results=)(\d+)/i);
if (p == null) {
if (Calendar.timeZoneCheck) {
var q = c[i].published.$t.substr(23, 6);
if (q != unescape(e)) {
e = encodeURIComponent(q);
e = e.replace(/\-/, '%2D')
}
}
var r = g.substr(5, 2);
if (h == Calendar.month_days[parseInt(r, 10) - 1]) {
var s = g.substr(0, 4) + '-' + (parseInt(r, 10) + 1) + '-01';
if (s.length < 10) s = s.substr(0, 5) + '0' + s.substr(5, 5)
} else {
var s = g.substr(0, 8) + (parseInt(h, 10) + 1);
if (s.length < 10) s = s.substr(0, 8) + '0' + s.substr(8, 1)
}
o = 'http://' + Calendar.base + '/search?updated-min=' + g + 'T00%3A00%3A00' + e + '&updated-max=' + s + 'T00%3A00%3A00' + e + '&max-results=2'
} else o = o.replace(/(max-results=)(\d+)/i, '$1' + (p[2] * 1 + 1));
n.setAttribute('href', o);
n.setAttribute('title', l + ', \n' + n.getAttribute('title'));
continue
}
d = h;
k.innerHTML = '<a href=' + c[i].link[m].href + ' title="' + l.replace(/\"/g, '&#34;') + '">' + k.innerHTML + '</a>';
k.className = 'Linkday'
}
}
if (a.feed.openSearch$totalResults.$t * 1 > 35) {
if (!Calendar.listMode) fetchposts(g.substr(0, 4) * 1, r * 1, a.feed.openSearch$startIndex.$t * 1 + 35, 'cal');
else fetchposts(g.substr(0, 4) * 1, r * 1, a.feed.openSearch$startIndex.$t * 1 + 35, 'list')
} else Calendar.gainControl()
}
function drawTable() {
var a = document.createElement('div');
a.setAttribute('id', 'CalendarCaption');
var b = '<div id="monthTable" style="z-index:999;background-color:' + Calendar.tableColor + ';">';
for (var i = 0; i < 12; i++) {
b += '<a href="javascript:Calendar.monthTable(' + i + ');">' + Calendar.month_label_real[i] + '</a><br>'
}
b += '</div>';
var c = '<div id="yearSelect"><form name="form2year" onsumbit="javascript:return false;" action="">';
c += '<input style="width:4em;z-index:999;" class="yearInput" type="text" value="' + Calendar.cur_day.getFullYear() + '" name="enteryear" onkeypress="if(event.keyCode==13||event.which == 13) {Calendar.yearTable(this.value); return false;}" /></form></div>';
var d = '<table align="center"></tbody><tr><td><a href="javascript:void(0);">&lt;&lt;&nbsp;&nbsp;</a></td>';
d += '<td style="text-align:center;width:70%"><span id="CalendarMonth"><span id="monthTable_parent"></span>&nbsp;&nbsp;&nbsp;';
d += '<span id="yearSelect_parent"></span></span></td>';
d += '<td><a href="javascript:void(0);">&nbsp;&nbsp;&gt;&gt;</a></td></tr></tbody></table>';
d += b + c;
a.innerHTML = d;
var e = document.createElement('div');
e.setAttribute('id', 'CalendarTable');
var f = document.createElement('div');
f.setAttribute('id', 'CalendarFooter');
f.style.textAlign = 'left';
var g = '<a href="javascript:Calendar.cur_day.setTime(Calendar.today);Calendar.refreshTable();" id ="Today" class="Today">' + Calendar.todayMsg + '</a>&nbsp;&nbsp;';
g += '<span id="todayShow">' + Calendar.month_label[Calendar.cur_day.getMonth()] + '/';
if (Calendar.cur_day.getDate().toString().length < 2) g += '0' + Calendar.cur_day.getDate();
else g += Calendar.cur_day.getDate();
g += '/' + Calendar.cur_day.getFullYear() + '</span>';
g += '<span id="showTOC">&nbsp;&nbsp;<a href ="javascript:Calendar.toggleTOC();">' + Calendar.showTOC[0] + '</a>&nbsp;&nbsp;</span>';
g += '<span id="CalLoading">' + Calendar.loading + '</span>';
f.innerHTML = g;
var h = document.getElementById('blogCalendar');
h.style.textAlign = 'center';
h.appendChild(a);
at_attach('monthTable_parent', 'monthTable', 'click', 'y', 'pointer');
at_attach('yearSelect_parent', 'yearSelect', 'click', 'y', 'pointer');
h.appendChild(e);
if (Calendar.alignFooter) {
var j = a.getElementsByTagName('table')[0].offsetLeft - a.offsetLeft;
f.style.paddingLeft = j + 'px'
}
h.appendChild(f);
if (Calendar.timeZone.length < 4 && Calendar.timeZone != 'Z') Calendar.timeZone = Calendar.timeZone + ':00';
Calendar.timeZone = encodeURIComponent(Calendar.timeZone);
Calendar.timeZone = Calendar.timeZone.replace(/\-/, '%2D');
Calendar.refreshTable()
}
function refreshTable() {
var a = Calendar.cur_day.getMonth();
var b = Calendar.cur_day.getFullYear();
document.getElementById('monthTable_parent').innerHTML = Calendar.month_label_real[a];
document.getElementById('yearSelect_parent').innerHTML = b;
Calendar.cur_day.setDate(1);
if (!Calendar.listMode) document.getElementById('CalendarTable').innerHTML = Calendar.Calendar(Calendar.cur_day);
if (Calendar.today >= Calendar.cur_day) {
var c = document.getElementById('CalendarCaption').getElementsByTagName('a');
c[0].setAttribute('href', 'javascript:void(0)');
c[1].setAttribute('href', 'javascript:void(0)');
var d = document.getElementById('CalendarFooter').getElementsByTagName('*');
for (var i = 0; i < d.length; i++) {
if (d[i].getAttribute('id') == 'CalLoading') d[i].style.display = 'inline';
else if (d[i].getAttribute('id') != null) d[i].style.display = 'none'
}
if (/Safari/i.test(navigator.userAgent)) {
var e = setInterval(function () {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(e);
Calendar.alreadyrunflag = 1;
Calendar.fetchposts(b, a, 1)
}
}, 10)
} else Calendar.fetchposts(b, a, 1)
} else {
if (document.getElementById('TOCTable') != null) document.getElementById('TOCTable').innerHTML = ''
}
}
function toggleTOC() {
if (!Calendar.listMode) {
Calendar.listMode = true;
document.getElementById('showTOC').innerHTML = '&nbsp;&nbsp;<a href ="javascript:Calendar.toggleTOC();">' + Calendar.showTOC[1] + '</a>&nbsp;&nbsp;';
var a = document.getElementById('CalendarTable');
var b = a.getElementsByTagName('table')[0];
var c = b.offsetHeight;
var d = '<div id="TOCScroll"><table id="TOCTable" style="width:' + b.offsetWidth + 'px;"></table></div>';
a.innerHTML = d;
var e = document.getElementById('TOCScroll');
e.style.overflow = 'auto';
e.style.height = c;
Calendar.refreshTable()
} else {
Calendar.listMode = false;
document.getElementById('showTOC').innerHTML = '&nbsp;&nbsp;<a href ="javascript:Calendar.toggleTOC();">' + Calendar.showTOC[0] + '</a>&nbsp;&nbsp;';
Calendar.refreshTable()
}
}
function drawTOCTable(a) {
var b = document.getElementById('TOCScroll');
var c = '<table id="TOCTable" style="text-align:left;width:' + document.getElementById('TOCTable').offsetWidth + 'px;" align="center" cellspacing="0">';
var d = a.feed.entry;
if (d != undefined) {
c += '<thead><tr><th onclick="Calendar.sortTable(&#39;TOCTable&#39;,0)" style="cursor: pointer;text-align:center;">Title</th><th onclick="Calendar.sortTable(&#39;TOCTable&#39;,1,&#39;date&#39; )" style="cursor: pointer;text-align:center;">Date</th></tr></thead>';
for (var i = 0; i < d.length; i++) {
var e = d[i].published.$t.substr(0, 10);
var f = e.substr(8, 2);
var g = d[i].title.$t;
var h = e.substr(5, 2);
var j = 0;
while (j < d[i].link.length && d[i].link[j].rel != 'alternate') j++;
var k = j;
c += '<tr><td><a href="' + d[i].link[k].href + '">' + g + '</a></td><td>' + h + '/' + f + '</td></tr>'
}
c += '</table>';
b.innerHTML = c;
sortTable('TOCTable', 1, 'date')
} else {
c += '</table>';
b.innerHTML = c
}
Calendar.gainControl()
}
function PrevMonth() {
theMonth = Calendar.cur_day.getMonth() - 1;
year = Calendar.cur_day.getFullYear();
if (theMonth < 0) {
theMonth = 11;
year--
}
Calendar.cur_day.setFullYear(year, theMonth);
Calendar.refreshTable()
}
function NextMonth() {
theMonth = Calendar.cur_day.getMonth() + 1;
year = Calendar.cur_day.getFullYear();
if (theMonth > 11) {
theMonth = 0;
year++
}
Calendar.cur_day.setFullYear(year, theMonth);
Calendar.refreshTable()
}
function monthTable(a) {
Calendar.cur_day.setMonth(a);
Calendar.refreshTable()
}
function yearTable(a) {
Calendar.cur_day.setYear(a);
Calendar.refreshTable()
}
function gainControl() {
var a = document.getElementById('CalendarCaption').getElementsByTagName('a');
a[0].setAttribute('href', 'javascript:Calendar.PrevMonth();');
a[1].setAttribute('href', 'javascript:Calendar.NextMonth();');
var b = document.getElementById('CalendarFooter').getElementsByTagName('*');
for (var k = 0; k < b.length; k++) {
if (b[k].getAttribute('id') == 'CalLoading') b[k].style.display = 'none';
else if (b[k].getAttribute('id') != null) b[k].style.display = 'inline'
}
}
Calendar = new ArchiveCalendar();

function at_show_aux (a, b) {
var p = document.getElementById(a);
var c = document.getElementById(b);
var d = (c["at_position"] == "y") ? p.offsetHeight + 2 : 0;
var e = (c["at_position"] == "x") ? p.offsetWidth + 2 : 0;
for (; p; p = p.offsetParent) {
d += p.offsetTop;
e += p.offsetLeft
}
c.style.position = "fixed";
c.style.top = d + 'px';
c.style.left = e + 'px';
c.style.visibility = "visible"
}
function at_show() {
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child"]);
at_show_aux (p.id, c.id);
clearTimeout(c["at_timeout"])
}
function at_hide() {
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child"]);
c["at_timeout"] = setTimeout("document.getElementById('" + c.id + "').style.visibility = 'hidden'", 333)
}
function at_click() {
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child"]);
if (c.style.visibility != "visible") at_show_aux (p.id, c.id);
else c.style.visibility = "hidden";
return false
}
function at_attach(a, b, d, e, f) {
var p = document.getElementById(a);
var c = document.getElementById(b);
p["at_parent"] = p.id;
c["at_parent"] = p.id;
p["at_child"] = c.id;
c["at_child"] = c.id;
p["at_position"] = e;
c["at_position"] = e;
c.style.position = "absolute";
c.style.visibility = "hidden";
var g = c.childNodes;
for (var i = 0; i < g.length; i++) {
if (g[i].nodeName == 'FORM') break
}
if (f != undefined) p.style.cursor = f;
switch (d) {
case "click":
p.onclick = at_click;
p.onmouseout = at_hide;
c.onmouseover = at_show;
if (i == g.length) c.onmouseout = at_hide;
break;
case "hover":
p.onmouseover = at_show;
p.onmouseout = at_hide;
c.onmouseover = at_show;
if (i == g.length) c.onmouseout = at_hide;
break
}
}
function sortTable(g, h, j) {
function convert(a, b) {
switch (b) {
case "date":
return new Date(Date.parse(a + '/2000'));
default:
return a.toString()
}
}
function generateCompareTRs(e, f) {
return function compareTRs(a, b) {
var c = a.cells[e].firstChild;
var d = b.cells[e].firstChild;
if (f == 'date') {
vValue1 = convert(c.nodeValue, f);
vValue2 = convert(d.nodeValue, f)
} else {
vValue1 = convert(c.innerHTML, f);
vValue2 = convert(d.innerHTML, f)
}
if (vValue1 < vValue2) return -1;
else if (vValue1 > vValue2) return 1;
else return 0
}
}
var k = document.getElementById(g);
var l = k.tBodies[0];
var m = l.rows;
var n = new Array;
for (var i = 0; i < m.length; i++) {
n[i] = m[i]
}
if (k.sortCol == h) n.reverse();
else n.sort(generateCompareTRs(h, j));
var o = document.createDocumentFragment();
for (var i = 0; i < n.length; i++) {
o.appendChild(n[i])
}
l.appendChild(o);
k.sortCol = h
}

Berikut kode format CSS style yang bisa kalian beri gaya

<style>
#blogCalendar {

}
#CalendarCaption a {

}
#CalendarCaption {

}
#CalendarTable a {

}
.Today {

}
#CalendarFooter {

}
.yearInput {

}
#monthTable {

}
#TOCScroll {
height: 212px;
}
</style>

Link berguna sekali

• Archieve calendar for blogger.
• lvchen.byethost16.com/Calendar10/calendar_install.html

Demikian postingan hari ini, semoga sobat bisa memakai hacked yg sangat penomenal :d Oooops hampir lupa, CSS style disatukan penempatannya yah dengan si script ;)