Tạo khung Author Box bên dưới bài viết cho Blogspot

Nếu bạn nào đã dùng qua Wordpress thì chắc hẳn cũng biết ít nhiều về Author Box. Author Box là 1 khung nhỏ, nằm ở dưới mỗi bài viết của bạn. Nó nhằm cung cấp cho độc giả biết tác giả bài viết là ai? Có sở thích gì?... Khi tạo Author Box, độc giả sẽ cảm thấy Blog của bạn trông chuyên nghiệp hơn và nó cũng thu hút độc giả ghé thăm Blog của bạn.

Nhưng, Blogspot lại không có chức năng thêm Author Box này cho nên việc thêm nó buộc các bạn phải chỉnh sửa ở Template của các bạn. Và ở bài viết này, mình sẽ hướng dẫn các bạn làm điều đó..

Tạo khung Author Box bên dưới bài viết cho Blogspot

Bước 1: Truy cập trang quản trị Blog của bạn, chọn Mẫu > Chỉnh sửa HTML và tìm tới đoạn ]]></b:skin>.

Sau khi tìm thấy  ]]></b:skin> nằm ở đâu, bạn hãy chèn đoạn code CSS này vào bên trên nó:

/* Author box by tqd.96.lt */
#post-footer-author {
width: 90%;
height: 67px; 
background: #e6e6e6; 
border:3px solid #b3b3b3;
margin: 8px 0px 8px 0px; 
font-family: Arial,Verdana; 
}
#author-img { /*  Tùy chỉnh avatar */
width: 54px; 
height: 54px; 
background: #fff; 
float: left;
margin: 7px; 
}
#author-box {
padding-right: 5px;
margin: 0px;
}
#author-box p{ / * Tùy chỉnh phần mô tả * /
font-size: 12px; 
padding: 10px; 
margin: 0;
text-align: justify;
text-transform: normal;
color: #666666;
}
#author-box a{ / * Tùy chỉnh link * /
color: #000fcc; 
text-decoration:none;
}
#autor-box a:hover { 
color:#7780ee; 
text-decoration:underline; 
}

Bước 2: Cũng ở chỉnh sửa HTML, bạn hãy tìm tới đoạn <data:post.body/>. Tìm xong, hãy chèn đoạn code dưới đây vào bên dưới <data:post.body/>:

<!--Author box by tqd.96.lt-->
<div id='post-footer-author'>
<div id='author-img'>
<img src='URL avatar của bạn' style='width: 50px;height: 50px; border: 2px solid #b3b3b3; padding: 0; margin: 0;'/>
</div>
<div id='author-box'>
<p>
Nội dung phần mô tả
</p>
</div>
<!--/Author box by tqd.96.lt-->
</div>

Lưu ý: Nếu bạn tìm được nhiều đoạn <data:post.body/> thì hãy dán nó vào dưới đoạn <data:post.body/> cuối cùng nha. Hoặc để cẩn thận hơn thì bạn thay vào từng đoạn một rồi ra xem đến khi nào được thì thôi.
Công việc tiếp theo là các bạn hãy thay thông tin tác giả vào đoạn code ở trên. Khi chỉnh sửa xong, bấm Lưu mẫu và ra Blog của bạn xem 1 bài viết nào đó để xem kết quả nha
Tổng kết
Như vậy là trên đây, mình đã hướng dẫn các bạn cách Tạo khung Author Box bên dưới bài viết cho Blogspot. Hy vọng với thủ thuật này, sẽ giúp các bạn tạo 1 Blog chuyên nghiệp hơn.

Chúc các bạn thành công!!