Home » Thủ thuật blog
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
Đâ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'/>
Như vậy là đã xong. Chúc các bạn thành công.

- BlogSpot cải thiện tính năng SEO cho blog
- ANCKeywords - Tự động cập nhập keywords từ người dùng cho site.
- ANCData - Plugin load feed Blogger version 1
- Đưa Radio vào Blog của bạn (Yêu cầu)
- [Updated] K14 - Pro Menu (với hiệu ứng prodown)
- Chèn Chabox Gtalk vào BlogSpot.
- Jquery Slider Tin Tức - News Slider
- Quà tặng âm nhạc cho BlogSpot
- Tiện ích Top Commentators cho blogspot
- Chèn link Google Search vào footer của bài viết
- SlideTab Recent posts (jQuery)
- [Update] Tạo Menu Thanh menu ngang có sổ dọc xuống
Comments[ 0 ]
Đăng nhận xét