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 ~ blog chia sẻ kiến thức lập trình

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.

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:

1
2
3
div class='post-header-line-1'

Nếu không tìm thấy, hãy thử dòng lệnh sau:

1
2
3
div class='post-header'

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:

1
2
3
data:post.body

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/AVvXsEgVfQ3hu9Ry2er4sA44j5FI4-Y_rtG5PuyY36cPHvPwOA2C-N3n-9sjcv7-IcQq12xSCwcd87h3nBMbpnxXhrjhmYhN_cdP_GlWxFnyY3DHA074AHExbdSAS1rALCV48pURXL8La6zfUo4X/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/AVvXsEiumlMVKr0qxXusmgA64irWLCBNz4XSq5bJABTLC0kAdKBNY-n1CUCF57-LFaKbNAYOdNoNJzBegriCwJsGvxK1lMsGFV5y7sQPXJWcuXvhUPSyXQQfuLpMNL2cxrwyu4i1vTRFHdGmfsA4/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/AVvXsEhpFbsW-z1QLdGimH7tgwXVUVUGY8hCtKa7OpWp_8th9JFLSJ7JKr8xLyTow0E92c85dK7uRGfau7VvymXdtu-O7jDGwVVvRUzCpVkKrKNGYLkOGmZx5JRomz9HZ1fAEVU1PZQ6KcJPwI67/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 + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
    <span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <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-PVj0W-h-Hpp0-fGHx3eMJHvUmPvPiIH4WgU231T7QJ9tvdHpTN3_GZmRVllXvUdMpissRm4kxAKYynRT0wJjPadVIzlHmy0q5LSQi729HxgxIK4uDcQgkW5y1G_xhPC6sKi0qtt7FF1n/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 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ằ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

1
2
3
4
5
6
<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 đổi authorProfileUrl 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.