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.
B1.Truy cập vào Blogger: Bảng điều khiển (Dashboard) >> Bố cục (Layout) >> Chỉnh sửa HTML (Edit HTML).
B2.TÌm (Ctrl – F) đoạn mã:]]></b:skin>
B3,chèn code bên dưới phía trên mã ]]></b:skin>
.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;
}
B4.TÌm (Ctrl – F) đoạn mã:<data:post.body/>
B5,chèn ngay sau đoạn mã:
<!--KHUNG TÁC GIẢ BÀI VIẾT-->
<b:if cond='data:blog.pageType == "item"'>
<div class='author_info'>
<p><h4>Bài viết được đăng bởi</h4></p>
<div class='author_photo'>
<a href='http://www.chipkool.blogspot.com'><img alt='My Photo' height='120' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAcBhQkas_EdZfvn3ALdQbKQxzslYpmQhIWbLZsqrhV7rWygPQ9GZ72Iyum2ysV3KXvC_l5SK-NERqShd7yQCP7PUSOS1BgVB87IwbDEypOX2ceVj5VLZ0HT3BOzBW_uTb-Da8TjfIfSo/s1600/logo.png' width='100'/></a></div>
<h3><data:post.author/></h3>
<p>
♫ΩNhóm Sinh Viên Trường Đại Học Kinh Tế - Kỹ Thuật Công Nghiệp
◄►Khoa Điện - Điện Tử
◄►Luôn luôn cập nhật - Bài viết mới
◄►Kết nối cộng đồng Blogger
◄►Hãy chia sẻ để được chia sẻ^^'
</p>
<p align='right'>Facebook Điện Tử | Tin Học <a href='http://www.facebook.com/pages/Blog-%C4%90i%E1%BB%87n-T%E1%BB%AD-Tin-H%E1%BB%8Dc/154690947910240?v=wall'>Facebook</a> - <a href='http://www.chipkool.blogspot.com/2010/12/icon-blog.html'>Liên hệ với tác giả</a></p>
</div>
</b:if>
<!--END KHUNG TÁC GIẢ BÀI VIẾT-->
B6. 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;
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.
B7.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ả vnblognet và vnpressnet
<b:if cond='data:blog.pageType == "item"'>
<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>
<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>
<!—*****************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:
<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>
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é.
Nguồn vnblognet.com
