"Hiển thị ngày đăng bài dạng lịch xé cho blogspot"

(Traidatmui.com) – Hôm nay mình sẽ giúp các bạn thực hiện việc hiển thị ngày đăng bài viết trên blogger dạng lịch xé. Để thực hiện việc này thì blog bạn đòi hỏi phải bật tính năng hiển thị ngày tháng đăng bài cho blog. Khi bật tính năng này thì mỗi bài viết trên blog của bạn sẽ có ngày đăng đi theo thường hiển thị phía trên tiêu đề bài viết. Tuy nhiên sau khi thực hiện thủ thuật này thì ngày đăng bài viết của bạn sẽ hiển thị một phong cách mới hoàn toàn, dưới dạng lịch xé trông đẹp mắt hơn.

Ảnh trước khi thực hiện thủ thuật
Ảnh sau khi thực hiện thủ thuật
1. Đầu tiên đăng nhập vào Blogger
2. Vào thiết kế (Design)
3. Tại đây bạn click "Chỉnh sửa" trên nền post
4. Nếu trên blog bạn chưa bật tính năng hiển thị ngày đăng, bạn check vào ô ngày như bên dưới. Bạn hãy chọn định dạng ngày đăng là mm.dd.yyyy, ví dụ là 12.03.2010 như bên dưới.
5. Save lại và chọn tiếp phần chỉnh sửa HTML (Edit HTML)
6. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
7. Chèn code bên dưới vào sau thẻ <head>
<script type='text/javascript'>
//<![CDATA[
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</script>

8. Bạn chèn code css bên dưới vào trước thẻ ]]></b:skin>
.dateblock {
background: url(http://lh5.ggpht.com/_BTztXRwC9ik/TPj7IQQ_b1I/AAAAAAAAFQ4/wkjcXds6b9o/calendar.png)
no-repeat;
padding-top:5px;
width: 48px;
margin-right: 5px;
font-weight: bold;
height: 41px;
float: left;
text-align: center;
line-height:1.5em;}

.month {
font-size: 11px;
margin-top: 0px;
text-transform: uppercase;
color: #ff0033;
font-family:verdana;}

.day {
color:#0000ff;
font-size: 22px;
margin: 0px;
}

Các code css quen thuộc bạn tự chỉnh sửa nha.
9. Bây giờ bạn tìm tiếp đến code bên dưới
<data:post.dateHeader/>

Thay nó thành code bên dưới
<div class='dateblock'> <script> date_replace('<data:post.dateHeader/>');</script ></div>

10. Save template lại là xong

Chúc bạn thành công

Xem khác cùng chủ đề

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang