Tutorial : Calender Blog Archive

Live Preview

1. Layout --> Add A Gadget --> Edit html/Java Script
2. Copy and paste this code :

<center><div id="blogCalendar"></div>
<script type="text/javascript" src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js"></script>
<script type="text/javascript">
Calendar.base="Url Blog";
Calendar.timeZone="+08:00";
Calendar.timeZoneCheck = true;
Calendar.drawTable();
</script>
<style>
#blogCalendar {
display:block;
text-algin:center;
border:3px solid #F6358A;
width:90%;
background: #ffffff;
}
#CalendarCaption a {
text-decoration:none;
}
#CalendarCaption {
border-bottom: 2px solid #F6358A;
width:85%;
margin:auto;
}
#CalendarTable a {
font-weight:bold;
color: #F6358A;
}
.Today {
background: #F6358A;
font-weight:bold;
text-decoration:none;
}
#CalendarFooter {
font-weight:bold;
margin-top:5px;
margin-bottom:5px;
background: #FFC0CB;
}
.yearInput {
color: #000000;
background: #F6358A;
}
.monthTable {
color: #000000;
background: #F6358A;
}
</style></center>

 EDIT :
Live Editing here
ABC : url blog korunk etc : http://youismysoul.blogspot.com/
ABC : Code warna sini

3. Preview dan Save !!