Đưa bloc Lịch âm dương theo ngày hiện tại lên web

Bài trước có giới thiệu về lịch âm dương nhưng theo tháng khi click vào ngày nào thì hiện các thông tin âm lịch của ngày đó , bây h muốn trình bày lịch âm dương theo kiểu lịch bloc truyên thống ( lịch tờ ) như hình sau:

Để chèn thêm lịch vào ta thêm những đoạn code sau vào trong trang web

B1 :chèn css


<style>
.khung_lich{
float:left;
height:320px;
width:240px;
border:2px solid #0000CC;
color:#000000;
background:url(bg.jpg) repeat;
}
.khung_lich_duong{
width:100%;
float:left;
height:136px;
}
#thangduong,#namduong{
width:50%;
text-align:center;
float:left;
font-weight:bold;
}
#ngayduong{
float:left;
text-align:center;
font-weight:bolder;
width:98%;
font-size:48px;
color:#FF0000;
}
#thuduong{
width:98%;
float:left;
text-align:center;
font-size:24px;
}
#khung_am{
float:left;
width:100%;
}
#ngayam{
font-size:24px;
font-weight:bolder;
}
#ngayright{
width:50%;
float:left;
text-align:center;
padding:0px 0px 10px 0px;
}
#ngayleft{
width:50%;
float:left;
text-align:center;
padding:0px 0px 10px 0px;
}
#khung_tietkhi{
border-top:#0000cc 2px solid;
float:left;
width:98%;
text-align:left;
padding:5px 0 0 5px;}</style>

B2 chèn link javascript code âm dương lịch vào


<script src="http://webvn20.googlecode.com/files/amlich-hnd.js" type="text/javascript"></script>

* fix tháng 11

<script src="http://webvn20.googlecode.com/files/amlich-hnd-fix.js" type="text/javascript"></script>


B3: Để đặt lịch ở đâu trên trang web thì ta chèn code này vào đó

<script  type="text/javascript">
document.writeln(printToday());
</script>

*Bonus Thay ảnh nền cho bloc lịch ta chỉ cần sửa css tìm đoạn :

.khung_lich{
float:left;
height:320px;
width:240px;
border:2px solid #0000CC;
color:#FFFFFF;
background:url(đường dẫn ảnh..jpg);}
Ngoài ra ta thay đổi thuộc tính trong css để bộ lịch trông sặc sỡ hơn
DEMO Code ngay tại trang này ( ngày mai quay lại sẽ thấy khác nhau ngay)

---