Adding Blogger Archive Calender

Cempluk pengen
ngasih tutorial, meski merupakan dari adaptasi namun tak ada salahnya jika kita
saling berbagi ilmu. Karena sebuah pengetahuan jika kita saling sharing maka
akan mendapatkan pahala dari yang Diatas. Betul gak ?? hehehe.. Tulisan ini
ditulis saat bengong mau belajar UAS besok..heheheh.. Juga kangen dengan rekan
rekan blogger semua... Jika rekan rekan blogger perhatikan Blog Archive pada
Blog ini maka akan nampak sebuah kalender yang setiap tanggal nya menunjukkan
postingan kita. Tips ini saya dapat dari sini.
Sekarang buka
account blogger anda, setelah itu klik layout dan klik menu edit HTML pada Template.
Sekarang cari script berikut ini : (anda bisa melakukan pencarian pada blog
anda dengan menekan tombol ctr + F kemudian ketik <b:widget pada edit HTML) .

Setelah script diatas telah ditemukan, silahkan ganti script tersebut dengan script berikut :
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId +
"_ArchiveList"'>
<b:if cond='data:style ==
"HIERARCHY"'>
<b:include data='data'
name='interval'/>
</b:if>
<b:if cond='data:style ==
"FLAT"'>
<b:include
data='data' name='flat'/>
</b:if>
<b:if cond='data:style ==
"MENU"'>
<b:include
data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data'
var='i'>
<li
class='archivedate'>
<a
expr:href='data:i.url'><data:i.name/></a>
(<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption
id='bcaption'>
</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->
<!-- Table Body -->
<tbody><tr><td id='cell1'>
</td><td id='cell2'>
</td><td id='cell3'>
</td><td id='cell4'>
</td><td id='cell5'>
</td><td id='cell6'>
</td><td id='cell7'>
</td></tr>
<tr><td id='cell8'>
</td><td id='cell9'>
</td><td id='cell10'>
</td><td id='cell11'>
</td><td id='cell12'>
</td><td id='cell13'>
</td><td id='cell14'>
</td></tr>
<tr><td id='cell15'>
</td><td id='cell16'>
</td><td id='cell17'>
</td><td id='cell18'>
</td><td id='cell19'>
</td><td id='cell20'>
</td><td id='cell21'>
</td></tr>
<tr><td id='cell22'>
</td><td id='cell23'>
</td><td id='cell24'>
</td><td id='cell25'>
</td><td id='cell26'>
</td><td id='cell27'>
</td><td id='cell28'>
</td></tr>
<tr><td id='cell29'>
</td><td id='cell30'>
</td><td id='cell31'>
</td><td id='cell32'>
</td><td id='cell33'>
</td><td id='cell34'>
</td><td id='cell35'>
</td></tr>
<tr id='lastRow'><td id='cell36'>
</td><td id='cell37'>
</td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>
<div id='calLoadingStatus' style='display:none;
text-align:center;'>
<script
type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>
<script type='text/javascript'>
initCal();</script>
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget
- Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget
- Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>
Kemudian cari
script berikut ini ]]></b:skin> </head>, seperti ini gambar nya :

Diantara script
tersebut (tepat ditengah nya) masukkan script berikut :
<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "View Archive";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];
// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();
//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
document.getElementById('calLoadingStatus').style.display = 'block';
document.getElementById('calendarDisplay').innerHTML = '';
}
function closeStatus(){
document.getElementById('calLoadingStatus').style.display = 'none';
}
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth,yr,nav){
// Check for Leap Years
if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
calMonth = mth;
calYear = yr;
if(mth.charAt(0) == 0){
calMonth = mth.substring(1);
}
callmth = mth;
bcNavAll = document.getElementById('bcFootAll');
bcNavPrev = document.getElementById('bcFootPrev');
bcNavNext = document.getElementById('bcFootNext');
bcSelect = document.getElementById('bcSelection');
a = document.createElement('a');
at = document.createTextNode(bcArchiveNavText);
a.href = bcNav[nav];
a.appendChild(at);
bcNavAll.innerHTML = '';
bcNavAll.appendChild(a);
bcNavPrev.innerHTML = '';
bcNavNext.innerHTML = '';
if(nav < bcNav.length -1){
a = document.createElement('a');
a.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Previous Archive';
prevSplit = bcList[bcp].split(',');
a.onclick =
function(){bcSelect.options[bcp].selected =
true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return
false;};
bcNavPrev.appendChild(a);
}
if(nav > 0){
a = document.createElement('a');
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Next Archive';
nextSplit = bcList[bcn].split(',');
a.onclick =
function(){bcSelect.options[bcn].selected =
true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return
false;};
bcNavNext.appendChild(a);
}
script = document.createElement('script');
script.src =
'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
document.getElementsByTagName('head')[0].appendChild(script);
}
function cReadArchive(root){
// Check for Leap Years
if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
closeStatus();
document.getElementById('lastRow').style.display = 'none';
calDis = document.getElementById('calendarDisplay');
var feed = root.feed;
var total = feed.openSearch$totalResults.$t;
var entries = feed.entry || [];
var fillDate = new Array();
var fillTitles = new Array();
fillTitles.length = 32;
var ul = document.createElement('ul');
ul.id = 'calendarUl';
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
var link = entry.link[0].href;
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var date = entry.published.$t;
var summary = entry.summary.$t;
isPublished = date.split('T')[0].split('-')[2];
if(isPublished.charAt(0) == '0'){
isPublished = isPublished.substring(1);
}
fillDate.push(isPublished);
if (fillTitles[isPublished]){
fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
}
else {
fillTitles[isPublished] = title;
}
li = document.createElement('li');
li.style.listType = 'none';
li.innerHTML = '<a href="'+link+'">'+title+'</a>';
ul.appendChild(li);
}
calDis.appendChild(ul);
var val1 = parseInt(calDay, 10)
var valxx = parseInt(calMonth, 10);
var val2 = valxx - 1;
var val3 = parseInt(calYear, 10);
var firstCalDay = new Date(val3,val2,1);
var val0 = firstCalDay.getDay();
startIndex = val0 + 1;
var dayCount = 1;
for (x =1; x < 38; x++){
var cell = document.getElementById('cell'+x);
if( x < startIndex){
cell.innerHTML = ' ';
cell.className = 'firstCell';
}
if( x >= startIndex){
cell.innerHTML = dayCount;
cell.className = 'filledCell';
for(p = 0; p < fillDate.length; p++){
if(dayCount == fillDate[p]){
if(fillDate[p].length == 1){
fillURL = '0'+fillDate[p];
}
else {
fillURL = fillDate[p];
}
cell.className = 'highlightCell';
cell.innerHTML = '<a
href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'"
title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
}
}
if( dayCount > fill[valxx]){
cell.innerHTML = ' ';
cell.className = 'emptyCell';
}
dayCount++;
}
}
visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
if(visTotal >35){
document.getElementById('lastRow').style.display = '';
}
}
function initCal(){
document.getElementById('blogger_calendar').style.display = 'block';
var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
document.getElementById('bloggerCalendarList').style.display = 'none';
calHead = document.getElementById('bcHead');
tr = document.createElement('tr');
for(t = 0; t < 7; t++){
th = document.createElement('th');
th.abbr = headDays[t];
scope = 'col';
th.title = headDays[t];
th.innerHTML = headInitial[t];
tr.appendChild(th);
}
calHead.appendChild(tr);
for (x = 0; x <bcInit.length;x++){
var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
var stripMonth = bcInit[x].href.split('_')[1];
bcList.push(stripMonth + ','+ stripYear + ',' + x);
bcNav.push(bcInit[x].href);
}
var sel = document.createElement('select');
sel.id = 'bcSelection';
sel.onchange = function(){var cSend =
this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
q = 0;
for (r = 0; r <bcList.length; r++){
var selText = bcInit[r].innerHTML;
var selCount = bcCount[r].innerHTML.split('> (')[1];
var selValue = bcList[r];
sel.options[q] = new Option(selText + ' ('+selCount,selValue);
q++
}
document.getElementById('bcaption').appendChild(sel);
var m = bcList[0].split(',')[0];
var y = bcList[0].split(',')[1];
callArchive(m,y,'0');
}
function timezoneSet(root){
var feed = root.feed;
var updated = feed.updated.$t;
var id = feed.id.$t;
bcBlogId = id.split('blog-')[1];
upLength = updated.length;
if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
else {timeOffset = updated.substring(upLength-6,upLength);}
timeOffset = encodeURIComponent(timeOffset);
}
//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'></script>
<!-- End Blogger Archive Calendar -->
Dan jangan keburu buru untuk mendapatkan calendar diblog anda, karena
kesabaran diperlukan untuk mengedit blog, lanjut ??? Ok kita lanjutkan,
sekarang simak script berikut ]]></b:skin> , yup script ini seperti
sebelumnya kan ?? Sebelum script
]]></b:skin> tersebut maka kita menyisipkkan bentuk dari calender yang
kita inginkan, berikut script calender seperti dalam blog saya :
----------------------------------------------- */
/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #000;padding:2px;margin:10px 0 0;background:#1F1FFF;}
/* The Archive Select Menu */
#bcaption select {border:0px;background:#1F1FFF;color:#fff;font-weight:bold;}
/* The Heading Section */
table#bcalendar thead {background:#000;}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px solid #000; font-family:Tahoma; font-weight:bold;color:#fff;}
/* The calendar Table */
table#bcalendar {border:1px solid #000;border-top:0; margin:0px 0 0px;width:95%;background:#fff;}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px solid #000;color:#1F1FFF;}
/* Links in Calendar */
table#bcalendar tbody tr td a {font-weight:bold;color:#000;}
/* First Row Empty Cells */
td.firstCell {}
/* Cells that have a day in them */
td.filledCell {}
/* Cells that are empty, after the first row */
td.emptyCell {}
/* Cells with a Link Entry in them */
td.highlightCell {background:#ddd;border:1px outset #000}
/* Table Footer Navigation */
table#bcNavigation {width:95%;background:#1F1FFF;border:1px solid #000;border-top:0;}
table#bcNavigation a {text-decoration:none;color:#fff;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a{}
Pengutak atikan pada Edit HTML kita cukupkan sampai sini. Silahkan rekan rekan blogger klik Save Template. Eitss..tunggu dulu jangan beranjak untuk meilhat hasil nya, sekarang kita beralih ke Page Element , cari menu Blog Archive atau jika anda belum mempunyai maka silahkan menambahkan dengan mengklik add page element dan klik blog archive untuk mengaktifkannya. Dan silahkan anda mengubah style menjadi Flat List, kosongkan pada Options dan Pada Archive Frequency centang Monthly (atur seperti gambar di bawah ini):

Sekarang lihat tampilan blog anda, ada perubahan pada Blog Archive nya
bukan ??? Kalau belum berubah atau error, silahkan rekan rekan blogger
mengirimkan e-mail ke andibagus@pokoke.com.
Selamat Mencoba..
Terinspirasi oleh : http://phydeaux3.blogspot.com/



