Hiển thị tên tác giả – ngày đăng – nhãn bên dưới tiêu đề bài viết trong blogger
Cách làm
1Từ Blogger Dashboard > Template > Edit HTML
2Bạn để con trỏ chuột trong trình chỉnh sửa HTML, sau đó nhấn tổ hợp phím Ctrl+F để tiến hành tìm kiếm dòng lệnh sau:
<data:post.author/>
|
|
div class='post-header-line-1'
|
Nếu không tìm thấy, hãy thử dòng lệnh sau:
Tuy nhiên có thể bạn tìm được một trong hai dòng lệnh trên và tiếp tục làm bước 3 vẫn không thành công thì hãy tìm đến dòng lệnh sau:
3 Nếu bạn đang áp dụng với hai dòng lệnh đầu của bước 2 thì dán đọan code sau đây vào SAU cái thẻ mà bạn tìm được:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;">
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnpjvVmsjV29d9Z4uKVTy9ddkeAfzV7VrI_2l7GCOfoyaTIX-wsJfV05vqVEMcVtBWLSQ5ycUF0hMhTGPE8YQcywAgYQHnrzY7fsEVigab_9xH3cHLu4PjFe5EO2f3XnSopDLqd9uhvqli/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/AVvXsEiCR7qtiQrryPLjhpk6gQCOCKOosTJf6TgWyZzJFHm4udbSUPcoHLuBU0DL2wMMKJ1nkY9QO-qty8_G5C_M_ENyqcnudradEdA6M4CmV8XGX6dImlxySzdX6tNyl4u44RGjcUuBCSTZ0z6o/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/AVvXsEhNQFQdj6vP7eyyiXZCGb-GsMQkHMiQTJI8-8qZtcD5_li7WbZmvEAilcxjH-UErv_mZlIQDbGJw03kxmucRMfAf9IxEsKnW07NgNI4Rdln6Vv1-1vNpRtcyS5Pfcygt1GFCXaZAHi4M5iy/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/AVvXsEj-3Uo6C1RhUZO_NNPIDIgz-SskFXHq0HE_b9J1Q9qG8YeFk7UBniZFNAoRlx7QE3Sg7glNjQea-IjzYc71n0QVAJe3HuUOuLwn5Q2oLP3FkwqLhbqmEGV9x0JrTrNCggvZxf7om67JCiI0/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>
|
Nếu bạn áp dụng với dòng lệnh thứ 3 trong bước 2 thì dán đoạn code ở trên vào
- 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 divclass='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ằng 0 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.
[Update] Nếu bạn muốn thêm liên kết ở tên tác giả, bạn hãy thay dòng <font> … </font> chứa thông tin tác giả bởi đoạn code sau
|
|
<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>
|
Lưu ý, địa chỉ ở trên sẽ là địa chỉ trang Google+ của tác giả, để có thể chuyển về địa chỉ mà bạn muốn thì chỉ còn cách đổiauthorProfileUrl mà thôi, blog sẽ có một bài viết riêng về vấn đề này. Thêm nữa, trong blogger hỗ trợ viết nhiều tác giả, do đó, nếu bạn thay authorProfileUrl thì nó sẽ ảnh hưởng đến TẤT CẢ các tác giả. Nghĩa là Tác giả 1 cũng có địa chỉ là abc, Tác giả 2 cũng có địa chỉ là abc luôn, không tiện!
Chúc bạn thành công.
BÀI VIẾT LIÊN QUAN:
TEMPLATE BLOGGER ĐẸP:
0 nhận xét:
Đăng nhận xét