January 16, 2009 – Viola.id

Nah sekarang saya mau berbagi bagaimana cara membuat kalender arsip seperti punya saya. Keistimewaan kalender tersebut adalah warna ornamen kalender dapat kita tentukan melalui layout – Font and Color ! Jadi kita tinggal klik untuk merubah warna ornamen kalender yang kita inginkan. Ada beberapa tahap yang harus anda lakukan! Langkah yang pertama adalah membuat style dari kalender tersebut dengan CSS. Caranya adalah sebagai berikut : masukkan kode CSS dibawah sebelum ]]></b:skin> ini kode css-nya:

/* Archive Calendar Variable Setups
Do not modify unless you know what’s what
=========================================

===========================================
End Archive Calendar Variables */

/* Archive Calendar CSS
———————————————– */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption – Holds the Archive Select Menu */
#bcaption {border:1px solid $bcTableBorderColor;padding:2px;margin:10px 0 0;background:$bcMenuBackgroundColor;font:$bcCalenderFonts}

/* The Archive Select Menu */
#bcaption select {background:$bcMenuBackgroundColor;border:0 solid $bcMenuBackgroundColor;color:$bcMenuTextColor;font-weight:bold;text-align:center;}

/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset $bcTableBorderColor; font:$bcCalenderFonts;background:$bcTableHeaderBackgroundColor;color:$bcTableHeaderTextColor}

/* The calendar Table */
table#bcalendar {border:1px solid $bcTableBorderColor;border-top:0; margin:0px 0 0px;width:95%;background:$bcTableBackgroundColor}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset $bcTableBorderColor; color:$bcTableTextColor;font:$bcCalenderFonts;}

/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:$bcCalenderLinksColor;}
table#bcalendar tbody tr td a:hover {color:$bcCalenderLinksHoverColor;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:$bcTableHighLightColor;border:1px solid $bcTableBorderColor}

/* Table Footer Navigation */
table#bcNavigation {width:95%;background:$bcTableFooterBackground;border:1px solid $bcTableBorderColor;border-top:0;color:$bcTableTextColor;font:$bcCalenderFonts;}
table#bcNavigation a:link {text-decoration:none;color:$bcFooterLinksColor}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}

Kemudian tekan Save.
Keterangan : dengan menggunakan CSS ini anda dapat mengubah ornamen langsung dari layout – Font and Color , tapi ketika anda merubah warna, tampilan dalam menu font and color tidak berubah, namun jangan kawatir walaupun seolah olah tidak berubah, nanti saat anda melakukan view blog, warna kalender anda sudah berubah.

Langkah selanjutnya adalah installasi, tahap pra installasi, yaitu blog anda harus sudah anda pasang Blog Archieve Widget terlebih dulu! Selanjutnya, klik Edit pada elemen Blog Archive tersebut, dan di sana akan anda temui 3 macam style atau bentuk arsip, yaitu Hierarchy, Flat List, dan Dropdown Menu. Pilih FLAT LIST. Kemudian lihat ke bawah, di sana ada Archive Frequency, ada 3 pilihan Monthly, Weekly, dan Daily. Pilih MONTHLY. Sementara persiapan yang lain adalah mengecek feed anda! namun biasanya sudah aktif, tapi pada blog-blog yang privat feed ini belum aktif. Tidak anda salahnya anda memeriksa feed anda di Blogger>Dashboard>Settings>Site Feed> Post Feed Nah tahap pra Installasi sudah selesai sekarang tahap installasinya! Begini langkah langkahnya :

Klik menu Edit Layout (atau Template) pada Dashboard anda dan kemudian pilih menu Edit HTML dan selanjutnya Jangan centang pada kotak Expand Widget Templates. Langkah selanjutnya Cari Kode Blog Archieve Widget anda! Ingat setiap widget dimulai dengan <b:widget bla… dan diakhri dengan </b:widget> jadi dalam hal ini harus mencari widget yang ada id Blog archivenya, kaya gini atau yang mirip mirip dengan ini <b:widget id=’BlogArchive1′ dan seterusnya. klo sudah ketemu Blok mulai dari <b:widget tadi sampai penutupnya </b:widget> kemudian kamu hampus dan ganti dengan yang ini :

<b:widget id=’BlogArchive1′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’>
<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>

</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>

</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 langkah terakhirnya adalah memasukkan java script dari kalender widget ini, caranya masukkan kode java berikut diantara ]]></b:skin> dan </head> codenya seperti ini :

<!– Blogger Archive Calendar –>
<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);
}

255);">function cReadArchive(root){
255);">// 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];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == “alternate”) {
var link = entry.link[j].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 = ”;
}
}

//]]>
</script>
<script src=’/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet’></script>
<!– End Blogger Archive Calendar –>

Nah Sampai disini pekerjaan anda telah selesai, jangan lupa di save terlebih dahulu, dan bersiap-siap dengan kalender yang cantik milik anda! Widget ini aku dapat dari phydeaux3 dan inspirasi yang lebih mbulet lagi disini!

ciput mardianto on Matrix Eisenhower untuk memprioritaskan Daftar PekerjaanJuly 12, 2024
Fighting procrastination involves understanding its root causes and implementing strategies to address them. Here are some effective ways to combat…
Om Koodok on Membuat Themes Blog SendiriMay 4, 2024
Punya saya blognya tegolong berat terlalu banyak koding
ciput mardianto on Konsisten produktifMay 4, 2024
Kalau mengerjakan sesuatu terlebih mengerjakan secara off line tidak dapat dikatakan kurang produktif, lebih produktif malah, jika secara output terdapat…
Djangkaru Bumi on Konsisten produktifMay 3, 2024
Saya makin ke sini makin berkurang produktif Terkendala waktu Sibuk dengan pekerjaan off line
ciput mardianto on Matrix Eisenhower untuk memprioritaskan Daftar PekerjaanApril 28, 2024
Silahkan cak, semoga bermanfaat

Day: January 16, 2009

Blogumus : Animasi Flash untuk Label di Blogspot

Blogger Calendar Widget

Membuat Spoiler sederhana di Blogspot