Cách tạo khung thông tin tác giả dưới mỗi bài viết cho Blogger

Khung hiển thị thông tin tác giả bài viết thực sự hữu ích với blog có nhiều tác giả tham gia viết bài, bởi ngoài việc giới thiệu tên, tiểu sử ngắn bạn còn có thể chèn địa chỉ weblog của tác giả để quảng bá cho chúng. Đây cũng là tiện ich cực hay của WP. Do vậy sẽ là thiếu sót nếu không tạo cho Blogger tiện ích giới thiệu Tác giả bài đăng sau mỗi bài viết.

VnBlognet [dot] com : Mỗi bài viết mặc định đều xuất hiện thông tin về tác giả qua dòng “Bài đăng bởi:” (Post by) dựa vào đó ta có thể sử dụng mã CSS đơn giản để tạo Khung tiện ích Tác giả bài đăng giống với WP.

(Hình minh họa)

Cách thực hiện như sau:

Chèn mã hiển thị tiện ích “Tác giả bài đăng:”

- Truy cập vào Blogger: Bảng điều khiển (Dashboard)  >>  Bố cục (Layout)  >> Chỉnh sửa HTML (Edit HTML).

- TÌm (Ctrl – F) đoạn mã: ]]></b:skin>

- Thay thế chúng bằng đoạn mã sau:

.author_info {
    float: left;
    width: 468px; 
    padding: 5px; 
    border: 1px solid #ccc; 
    margin: 5px 10px 5px 0px; 
    background: #eee;
}
.author_info h3 {
    margin-bottom: 0px;
}
.author_photo {
    float: left;
    margin: 0 10px 0 0;
    background: #fff;
}
.author_photo img {
    border: 1px solid #666;
}
]]></b:skin>

Chèn mã HTML tiệ ích vào sau bài viết:


- TÌm (Ctrl – F) đoạn mã: <data:post.body/>

- Chèn ngay sau nó đoạn mã:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<p><h4>Bài viết được đăng bởi</h4></p>
<div class='author_photo'>
<a href='http://www.vnpressnet.com'><img alt='My Photo' height='120' src='URLhình ảnh của tác giả' width='100'/></a></div>
<h3><data:post.author/></h3>
<p>- Đoạn text giới thiệu về tác giả </p>
<p align='right'>Follow him on <a href='Địa chỉ Twitter của tác giả'>Twitter</a> - <a href='mailto:vnblognet@gmail.com'>Liên hệ với tác giả</a></p>
</div>
</b:if>

 Chỉnh sửa tiện ích:


- Chỉnh sửa hiển thị: Bạn có thể thay thế các đoạn code màu đỏ trong bước 1dưới đây:
    width: 468px; 
    border: 1px solid #ccc; 
    background: #eee;
Trong đó :
468px là độ rộng của khung hiển thị  thông tin tác giả
1px solid #ccc là  khung hiển thị màu  #ccc có độ rộng là 1px
#eee là màu nền của khung thông tin tác giả


- Chỉnh sửa thông tin tác giả: Bạn chỉnh sửa các dòng màu xanh về thông tin tác giả trong bước 2 cho chính xác.

Tạo khung thông tin cho từng tác giả trong Blogger

- Với Blog chỉ có 1 người viết thì các bạn tạo như các bước trên là được, tuy nhiên với các Blogger có nhiều người viết chung và đăng bài thì bạn chỉ cần thao tác nhỏ giống như  thủ thuật đã được trong Cách chia sẻ thu nhập quảng cáo với các đồng tác giả trên Blogger.
- Để tạo thông tin cho Blogger có 2 tác giả tên là vnblognet và vnpressnet

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:post.author == &quot;vnblognet&quot;'>

<div class='author_info'>

<p><h4>Bài viết được đăng bởi</h4></p>
<div class='author_photo'>
<a href='Link_của_vnblognet’><img alt='My Photo' height='120' src='URL_hình_ảnh của_vnblognet' width='100'/></a></div>
 <h3><data:post.author/></h3>
<p>- Đoạn_text_giới _thiệu_về_vnblognet</p>
<p align='right'>Follow him on <a href='Địa_chỉ_Twitter_của_vnblognet'>Twitter</a> - <a href='mailto:Địa_chỉ_mail_của_vnblognet'>Liên hệ với tác giả</a></p>
</div>

</b:if>

<b:if cond='data:post.author == &quot;vnpressnet&quot;'>

<div class='author_info'>

<p><h4>Bài viết được đăng bởi</h4></p>
<div class='author_photo'>
<a href='Link_của_vnpressnet’><img alt='My Photo' height='120' src='URL_hình_ảnh của_vnpressnet' width='100'/></a></div>
<h3><data:post.author/></h3>
<p>- Đoạn_text_giới _thiệu_về_vnpressnet</p>
<p align='right'>Follow him on <a href='Địa_chỉ_Twitter_của_vnpressnet'>Twitter</a> - <a href='mailto:Địa_chỉ_mail_của_vnpressnet'>Liên hệ với tác giả</a></p>
</div>

</b:if>

<!—*****************Nơi chèn code của tác giả thứ 3****************** -->

</b:if>

- Tương tự nếu có thêm tác giả thứ 3 thì bạn cần thêm vào đoạn code sau:

<b:if cond='data:post.author == &quot;tácgiả3&quot;'>

<div class='author_info'>

<p><h4>Bài viết được đăng bởi</h4></p>
<div class='author_photo'>
<a href='Link_của_tácgiả3’><img alt='My Photo' height='120' src='URL_hình_ảnh của_tácgiả3' width='100'/></a></div>
<h3><data:post.author/></h3>
<p>- Đoạn_text_giới _thiệu_về_tácgiả3</p>
<p align='right'>Follow him on <a href='Địa_chỉ_Twitter_của_tácgiả3'>Twitter</a> - <a href='mailto:Địa_chỉ_mail_của_tácgiả3'>Liên hệ với tác giả</a></p>
</div>

</b:if>

thay thế cho dòng chữ

<!—*****************Nơi chèn code của tác giả thứ 3****************** –>

trong đoạn code đã giới thiệu ở trên.

Bạn nhớ thay đổi tên các tác giả cho đúng tên tác giả blog của bạn nhé.

CHÚC CÁC BẠN THÀNH CÔNG !!!