Hiện ngày (dạng lịch xé) trước mỗi bài viết trong BlOg

Trang chủ » Thu Thuat Blog » Thủ thuật Blogger » Bạn đang xem:

Hiện ngày (dạng lịch xé) trước mỗi bài viết trong BlOg

Thứ Tư, 15 tháng 4, 2009

Show Date before each Post in Blogger

[FD's BlOg] -Việc hiển thị ngày post bài trước mỗi bài viết thường được blogger mặc định là dạng chuỗi kí tự. Và kiểu hiển thị tùy theo ta thiết lập trong phần setting của bảng điều khiển. Hôm nay mình giới thiệu cho các bạn các hiển thị ngày post bài dạng lịch xé. Bài viết này ngòai việc hiển thị ngày post, còn có sửa đổi chút về bố cục bài viết. Đó là đưa thanh trạng thái của bài viết (thường ở cuối bài viết) lên trên, ngay dưới tiêu đề bài viết. Và 2 thủ thuật này mình sẽ lồng làm 1.

Đây là hình ảnh minh họa sau khi hòan thành:

Bất giờ ta bắt đầu:
1. Đăng nhập blog
2. Trước tiên bạn phải vào Bảng điều khiển --> Cài Đặt --> Định dạng , chỉnh sửa lại định dạng ngày đăng bài viết. (làm tương tự như hình bên dưới)

3. Vào phần Chỉnh sửa Code HTML
4. Nhấp vào Mở rộng tiện ích (nên lưu template lại trước khi làm)
5. Thêm đọan code CSS vào trước dòng ]]></b:skin>

#fecha {
display:block;
text-align: center;
float:left;height:70px;
font-family: Arial, Helvetica, sans-serif;
width:70px;
margin:0px 5px 0 0;
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/post-top_bg.png);
}

.fecha_dia {
display:block;
font-size:1.2em;
margin:0;
color:#336699;
font-weight: bold;
padding:0.7em 0 1.1em 0;
text-align: center;
}

.fecha_mes {
display:block;
font-size: 0.9em;
margin:0;
padding-top:5px;
color:#A10000;
font-weight: bold;
text-align:center;
}

.fecha_ano { display:none; visibility:hidden; height:0; }

.post-title, .post-title a {
margin-bottom:20px; padding:2px 0 0 0;
color:#00335B;text-decoration:none;
}
.post-title a hover {color:#00335B;text-decoration:none}
.post h2 {
font-family: Arial, Georgia, Sans-serif;
font-size: 18px;
margin-bottom:20px;
text-align:left;color:#00335B;
text-transform:uppercase;
}

.post-body {
font-family: Verdana, Arial, Georgia, Sans-serif;
font-size: 13px;margin-bottom:20px;margin-left:170px;
line-height: 1.3em;
margin: 3px 0 5px 0;
}

.post_header {
margin:0; padding:0;
height:90px;

}

.post_headerr {
margin-bottom:20px; padding:0;
}

.post-labels {
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/category-1.gif) no-repeat;
margin:0; padding:0 0 0 20px;
}

.details .post-comment-link {
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/comments-1.gif) no-repeat;
margin:0; padding:0 0 0 20px;
}

Chú ý: có thể thay đổi style theo ý bạn trong những đoạn code màu đỏ của đọan code CSS mẫu (như đổi màu nền, chữ, đổi hình ảnh theo ý thích...).

6. Tìm đọan code sau:

<div class='post uncustomized-post-template'> (hoặc tương tự)
Chọn code theo sau nó, cho tới dòng
<div class='post-body'>

Lưu ý: chỉ chọn code trong khỏang giữa 2 đọan code trên

7. Thay thế chúng bằng code sau:

<div class='post_header'>
<div id='fecha'>
<script>remplaza_fecha('<data:post.timestamp/>');</script>
</div>

<div class='post_headerr'>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>

<div class='details'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span> |
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

</div>
</div>
</div> <div class='post-header-line-1'/>

8. Save template.

Như vậy là đã xong. Chúc các bạn thành công.

Copy bài viết: