Chủ nhật, ngày 05 tháng mười hai năm 2010
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 Blogger2. 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>
//<![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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCGZEVAAdZpg3aE13ve08SLhyphenhyphentLJ5LcujWJIniUuIgu7DPStEt_9cbcbOIIzyY0p08cWjYP4h-ixxrDJVjXOhXrB92mLS9X4YV8sCZPlhnnKTh1PQoMdPISiUa73-dQ1lH-KhlJHd4PM_g/)
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;
}
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCGZEVAAdZpg3aE13ve08SLhyphenhyphentLJ5LcujWJIniUuIgu7DPStEt_9cbcbOIIzyY0p08cWjYP4h-ixxrDJVjXOhXrB92mLS9X4YV8sCZPlhnnKTh1PQoMdPISiUa73-dQ1lH-KhlJHd4PM_g/)
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
Labels:
Thủ thuật cơ bản
Previous Article
Responses
0 Respones to "Hiển thị ngày đăng bài dạng lịch xé cho blogspot"
Post a Comment