Hiển thị ngày đăng bài viết dạng lịch xé

Blogger có phần cài đặt ngày đăng bài viết theo nhiều kiểu khác nhau. Có người thích hiển thị ngày đăng theo dạng như 26/01/2011, hoặc January 26, 2011. Một bộ phận blogger thích hiển thị ngày đăng theo dạng lịch xé (lịch block).

Một số blog nước ngoài đã giới thiệu một cách như vậy, như ở trang Bloggerdummies. Ở Việt Nam cũng có giới thiệu lại như trang Fandung.com hay trang Traidatmui.com.

Hôm nay tôi sẽ giới thiệu một cách khác cũng khá đơn giản để hiển thị ngày đăng bài viết theo dạng lịch xé để đáp ứng ý thích của một bộ phận blogger như vậy. Bạn có thể xem Demo hoặc hình minh họa bên dưới.

Để cài đặt, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Settings (Cài đặt) >> Format (Định dạng). Tại mục Ngôn ngữ (Language), chọn Tiếng Anh (English), nhấn SAVE SETTINGS để lưu cài đặt. Sau đó ở mục Định dạng Tiêu đề ngày, chọn như hình bên dưới rồi nhấn lại SAVE SETTINGS để lưu cài đặt.

Bước 2. Vào Design (Thiết kế) >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code CSS sau đây vào trước dòng ]]></b:skin>.

.post-date {
background-color:#99C68E;
float:left;
font-size:32px;
width:45px;
text-align:center;
color:#F87217;
font-style:italic;
}
.post-date p {
font-size:14px;
color:#1a63af;
padding-bottom:4px;
}

Bước 3. Tìm dòng <div class='post hentry'>

Nếu không có thì tìm dòng <div class='post uncustomized-post-template'>

Rồi đặt sau nó, với đoạn code bên dưới.

<div class='post-date'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.dateHeader/>&quot;;
if (timestamp != &#39;&#39;) {
var timesplit = timestamp.split(&quot;,&quot;);
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(&quot; &quot;);
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<script type='text/javascript'>document.write(date_dd);</script>
<p><script type='text/javascript'>document.write(date_mmm);</script></p>
</div>

Lưu Template là OK.