Bạn có thể xem ví dụ ngay trong blog Math2IT. Bên dưới tiêu đề mỗi bài viết là thông tin liên quan đến bài viết ấy.
Đôi dòng giới thiệu
Đa phần những template có sẵn mà khi bạn download về sẽ có sẵn những mục này nhưng lại không thể theo ý muốn riêng của bạn. Hoặc những template đó thiếu đi những thông tin này, làm cho bài viết có bạn thiếu đi sự chuyên nghiệp cũng như người đọc khó lòng biết được thông tin chung của bài viết.
Ví dụ như ở blog của chúng mình, vốn dĩ có sẵn một <div> chứa những thông tin này nhưng nó lại được đặt dưới cùng của bài viết nhưng tụi mình không thể chỉnh sửa nó theo ý muốn và đôi khi các icon bị lỗi. Lý do là tác giả template này đã khéo léo chèn một đoạn code phức tạp khiến cho mình không thể sửa nó. Nhằm khắc phục nhược điểm này, mình cố tình ẩn đi thẻ này và làm một thẻ mới mà khi đó mình có thể tự do chỉnh sửa. Cách làm tham khảo từ trang thủ thuật blogger nổi tiếng - Help Blogger.
Ví dụ như ở blog của chúng mình, vốn dĩ có sẵn một <div> chứa những thông tin này nhưng nó lại được đặt dưới cùng của bài viết nhưng tụi mình không thể chỉnh sửa nó theo ý muốn và đôi khi các icon bị lỗi. Lý do là tác giả template này đã khéo léo chèn một đoạn code phức tạp khiến cho mình không thể sửa nó. Nhằm khắc phục nhược điểm này, mình cố tình ẩn đi thẻ này và làm một thẻ mới mà khi đó mình có thể tự do chỉnh sửa. Cách làm tham khảo từ trang thủ thuật blogger nổi tiếng - Help Blogger.
Cách làm
div class='post-header-line-1'
div class='post-header'
data:post.body
<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;">
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv2wKe6UvAu8c_ojkj6-eZda1Uc27E3OtBAsQKC3lJrcA4VCSUo8TrYhC9_-3nZX33_9V5AiMPmJkK97iiZWOSSbd5e8WtwnWK_NfrzQq1bcE5OFDkOtTgwvxJV5pHrVY3T-NI9A677sWx/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> |
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtToILcBFa77plEqFWVv5li9Jd83NTemG7oWaNfpxZYfHMlsKrZyiJuE5VTIGjpajpmWDNT_g5owmHv722UqXgdKipMWCU6ltqheOshE4i4BEn7I9FPJudfn_FV5xP4XWHBUGyCB_fhlU6/s1600/clock.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> |
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhjkF9kAp1sutXlJ4SNYEacI_iMmOggOE7xh74Um55FTfAPCdMGz0DpZyLYAUqJJJk_at-r1vwTa5ZxCsACoygQfY-MBy87o8p6ZQmdvsPNWhvx0fWp-1XMaRiArZg0mLezTfiy0WmK1ga/s1600/tag.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=8"' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
<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' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ1pA0JbTHt8DrEnUKTyDj49eWhHrO44ia25X5IVV13350Bm5o9lHk9CQCZwy_wZFzJoiuw7gacUkUfc0ZjVCsPSfnQhC39H0b50yT0Z1YWPXayOyerVxNTFmNTotZ0XE6eyz4aTuUPPSN/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
</b:if>
</b:if>
</span></div>
- TRƯỚC nó nếu bạn muốn hiện thanh thông tin ở ngay dưới tiêu đề bài đăng.
- SAU nó nếu bạn muốn hiện thanh thông tin này ở cuối bài viết.
[New] Lưy ý quan trọng:
- Lúc tìm kiếm có thể bạn sẽ tìm được NHIỀU kết quả. Khi ấy hãy THỬ với TẤT CẢ các kết quả tìm được. Cái này được thì OK, không thì xoá và thử với cái khác.
- Bạn lưu ý, từ khoá mình nêu ở trên là giúp bạn copy paste để tìm dễ hơn. Mình nói "dán vào sau nó" có nghĩa là vào sau CÁI THẺ chứa nó. Ví dụ bạn tìm được "data:post.body" thì dán vào sau nó có nghĩa là dán vào sau thẻ "<data:post.body />". Đại loại như vậy.
- Nếu bạn tìm không có từ khoá, hãy thử với một phần trong từ khoá ở trên thôi, đừng copy hết. Ví dụ thay vì tìm "div class='post-header-line-1'", hãy thử chỉ tìm với "post-header-line" thôi.
Chỉnh sửa theo ý muốn
Bạn để ý trong đoạn code ở bước 3 có nhiều cái style để bạn có thể tự chỉnh sửa, ở đây mình liệt kê một số cái:- Các link hình (
http://.../author.png ,http://.../clock.png ,http://.../folder.png ) bạn thay bằng link hình của chính blog mình vào. Điều này để tránh trường hợp sau này mấy hình này hết băng thông cũng không ảnh hưởng đến blog của bạn. - Kích thước chữ (
font-size: 13px; ) bạn thay bằng kích thước chữ sao cho phù hợp với giao diện blog của bạn. - Lằn gạch ngang (
boder-bottom: 1px ... ) bạn thay bằng0 nếu không muốn hiện lằn này. - Các thuộc tính trong thẻ div như
margin ,padding bạn cũng có thể tùy chỉnh để cho khoảng cách giữa hàng thông tin này với bài viết cũng như tiêu đề bài viết sao cho đẹp mắt nhất.
<font style='background:transparent url(https://lh5.googleusercontent.com/-epgpS7llSlk/U-4mmbvKJ-I/AAAAAAAAHHE/eVJ8H1Hz25I/s16-no/author.png) no-repeat scroll top left;padding-left:25px;font-size:13px;'>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span> </a>
</font>
Chúc bạn thành công.
Từ khoá tiếng Anh để tìm kiếm bài này : How to add more information about authors below the header or title of posts in blogger? Display post author, date, labels and comments with icons below post titles.
Trích: http://www.math2it.com/2014/08/hien-thi-ten-tac-gia-ngay-ang-nhan-ben.html
Trích: http://www.math2it.com/2014/08/hien-thi-ten-tac-gia-ngay-ang-nhan-ben.html
0 nhận xét:
Post a Comment