Trang chủ > Thủ thuật blog > Chèn lịch vào blog bằng CSS

Chèn lịch vào blog bằng CSS

[SBOY]– Một tiện ích cũng khá hay và có ích cho blog, đó là bạn giúp các đọc giả biết được ngày tháng năm ngay trên blog bạn. Để có được tiện ích đó, bạn phải đưa lịch vào blog mình. Có rất nhiều dạng lịch hiển thị ngày tháng năm theo rất nhiều kiều khác nhau. Ở đây mình xin giới thiệu cho các bạn cách đưa lịch vào blog dạng cơ bản bằng CSS. Đó là dạng hiển thị như hình ảnh minh họa bên dưới

Hình ảnh minh họa

☼ Bắt đầu thủ thuật

1. Đăng nhập và vào bố cục của blog
2. Tiếp theo vào chỉnh sửa HTML (Edit HTML)
3. Hãy dán code sau vào ngay bên dưới thẻ

.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}

<script type="text/javascript" src="http://singleboy010.110mb.com/Myfile/Javascript/javascript/calendar.js“>

/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

♦ Tùy chỉnh code: Code màu đỏ ở trên chính là bề rộng của lịch (width:200px) bạn có thể điều chỉnh lại cho phù hợp với blog mình, code màu cam là màu nền. Lớp .days #today chính là ngày hiện hành, ngày hiện hành sẽ được in dậm và có màu đỏ. Bạn có thể dựa vào code trên để tùy chỉnh cho phù hợp với ý mình.

4. Tạo HTML/Javascript và dán code bên dưới vào nó

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth ,curyear, “main”, “month”, “daysofweek”, “days”, 1));

5. Save lại là xong

☼ Mở rộng thủ thuật
Tuy nhiên bạn cũng có thể chọn style cho lịch này, ở đây minh giới thiệu thêm hai hình thức hiển thị. Nếu bạn chọn loại style nào thì chỉ việc thay code ở bước 4 thành một trong những code sau:

Style 1: Dạng này sẽ hiển thị thành 3 bảng

Hình ảnh minh họa

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth-1 ,curyear, “main”, “month”, “daysofweek”, “days”, 1));

document.write(buildCal(curmonth ,curyear, “main”, “month”, “daysofweek”, “days”, 1));

document.write(buildCal(curmonth+1 ,curyear, “main”, “month”, “daysofweek”, “days”, 1));

Style 2: Hiển thị dạng tùy chọn

Hình ảnh minh họa

Xem demo tại đây

var themonths=[‘January’,’February’,’March’,’April’,’May’,’June’,
‘July’,’August’,’September’,’October’,’November’,’December’]

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

function updatecalendar(theselection){
var themonth=parseInt(theselection[theselection.selectedIndex].value)+1
var calendarstr=buildCal(themonth, curyear, “main”, “month”, “daysofweek”, “days”, 0)
if (document.getElementById)
document.getElementById(“calendarspace”).innerHTML=calendarstr
}

document.write(‘Current Month’)
for (i=0; i<12; i++) //display option for 12 months of the year
document.write(”+themonths[i]+’ ‘+curyear+”)

//write out current month’s calendar to start
document.write(buildCal(curmonth, curyear, “main”, “month”, “daysofweek”, “days”, 0))


Công việc đến đây dã xong. Chúc bạn thành công

Tham khảo từ Dynamicdrive

Chuyên mục:Thủ thuật blog
  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: