(HN) -
(TP.HCM)
Thanh thông tin về bài viết cũng là 1 thành phần khá quan trọng cho blog. Cụ thể là thông tin về tác giả, ngày đăng bài, label, số lượng comments trong bài viết. Mẫu mặc định của blogger cơ bản cũng có những thông tin này nhưng trình bày chưa được bắt mắt lắm. Hôm nay sẽ hướng dẫn gom tất cả thông tin này vào 1 thanh công cụ đơn giản ngắn gọn và cũng rất đầy đủ.
Lưu lại rồi tiếp tục vào chỉnh sửa HTML → mở rộng tiện ích mẫu.
2. Chèn đoạn code sau vào trước thẻ ]]></b:skin>
.meta{background:#bcd;width:100%;padding:5px 0;overflow:hidden;
box-shadow: 3px 3px 3px #666;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666}
.meta_date,.meta_author,.meta_comments,.meta_edit,.meta_categories,.meta_tags{padding:5px 10px;font-size: 14px}
box-shadow: 3px 3px 3px #666;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666}
.meta_date,.meta_author,.meta_comments,.meta_edit,.meta_categories,.meta_tags{padding:5px 10px;font-size: 14px}
3. Tiếp tục xóa tất cả các đoạn code có dạng như sau, có 2 lần xóa:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
4. Tìm đến đoạn code sau:
<div class='post-footer-line post-footer-line-2'/>
5. Chèn đoạn code bên dưới vào sau đoạn code ở bước 4:
<div class='meta'>
<span class='meta_author'>Post By: <data:post.author/></span>
<span class='meta_date'>On: <script type='text/javascript'>
var timestamp = "<data:post.dateHeader/>";</script>
<script type='text/javascript'>document.write(timestamp);</script></span>
<span class='meta_categories'>Chuyên Mục: <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + "?max-results=5"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if></span>
<span class='meta_comments'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if></span>
</div>
<span class='meta_author'>Post By: <data:post.author/></span>
<span class='meta_date'>On: <script type='text/javascript'>
var timestamp = "<data:post.dateHeader/>";</script>
<script type='text/javascript'>document.write(timestamp);</script></span>
<span class='meta_categories'>Chuyên Mục: <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + "?max-results=5"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if></span>
<span class='meta_comments'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if></span>
</div>
Save template lại là hoàn thành.
Chú ý: #bcd là màu nền của thanh thông tin này. Các dòng chữ màu xanh có thể thay thành nội dung khác, bạn có thể thay đổi sao cho phù hợp với blog của mình.
Nếu có vấn đề gì bạn để lại comments bên dưới mình sẽ trả lời trong thời gian sớm nhất. Chúc bạn thành công.
Cập nhật
Muốn xóa bỏ chữ nhãn bên dưới bài đăng làm như sau:
Dùng từ khóa <span class="post-labels"> tìm và xóa toàn bộ đoạn code sau:
<span class='post-labels'>
...
</span>
Chữ nằm bên phải thì ở bước 2 bạn thay đoạn code
.meta_date,.meta_author,.meta_comments,.meta_edit,.meta_categories,.meta_tags{padding:5px 10px;font-size: 14px}
thành
.meta_date,.meta_author,.meta_comments,.meta_edit,.meta_categories,.meta_tags{float:right; padding:5px 10px; font-size: 14px}
Voquocan.com
0 nhận xét:
Đăng nhận xét