Cách tạo khung thông tin tác giả dưới mỗi bài viết cho Blogger
Wednesday, 19 May 2010
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)
- 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 == "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.vnpressnet.com'><img alt='My Photo' height='120' src='
URL hì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.
- 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 == "item"'>
<b:if cond='data:post.author == "vnblognet"'>
<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 == "vnpressnet"'>
<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 == "tácgiả3"'>
<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é.
Tags:
Breakingnews,
Khoi tao Blog,
Layout,
Post
Ý kiến bạn đọc [ 17 ]
Nếu blog chỉ có một tác giả thì cũng không cần phần giới thiệu này bác ạ. Vào phần About me xem cho nó chi tiết.
:)) poc teem nào
yes, nhưng có 1 tác giả mà có cái này ngay dưới bài viết cũng tiện, show hàng ngay cho độc giả đỡ mất công vào about us
Hóa ra là anh dùng code kiểu này.
Dù sao cũng là một cách hay. Tuy nhiên nếu thay vì đoạn code tự biên, nếu chèn được phần about mặc định của Blogger vào thì L nghĩ sẽ tuyệt...
cũng đã thử rồi Lâm à, chưa tìm ra được vì 2 tác giả trở lên nó không hiển thị about mặc định mà nó hiển thị danh sách tác giả, thử cắt và dãn mấy code about mặc định nhưng chưa được chấp nhận nên dùng tạm kiểu "dông tây y kết hợp này"
Vâng, thủ thuật này tuyệt đó. Chúng ta cần phải tìm tòi, cải tiến đế bằng ông Wordpress. Em đang nghiên cứu, chăc tối về rồi áp dụng. Cảm ơn bác nhiều!
Cái này hay thật ấy ! Em cứ nghĩ là chỉ wp mới có ! Ai ngờ có mấy cao thủ ở đây !
hay lắm ! à bao giờ bác ngâm cứu phần comment của blgspot giống cái comment của thằng worldpress , worldpress em bồ kết mỗi comment của nó
Bên WP có nhiều cái hay ho hơn blogspot nhiều nhưng cũng khó sử dụng...vì thế mình mới chọn blogspot cho nhẹ cái đầu. Cảm ơn bài viết hay của Chính.
www.taichinh247.com
À, anh ơi, mình có thể thêm vào VD như là Bài viết được đăng bởi...rồi ...đã viết được (bao nhiêu) cho blog được không anh? Thay (bao nhiêu) = con số bài đã post trong blog của mình ^^
Mình chưa tìm được cách để đếm số bài của tác giả.
Có cách nào hiển thị thông tin dựa vào link profile ko bác ??
Dựa vào tên người đăng bài như vầy không ổn , vì nếu tác giả đổi tên hiển thị trong blogger profile thì thủ thuật này không hoạt động được nữa
<b:if cond='data:post.author == "Tên Tác Giả"'>
mình thử mà chưa được ngan à, thử chèn cái profile của Google đó, nhưng không hoạt động, ngan có cách nào không?
Đã tìm được roài ngan à, update rồi đấy bạn à, cám ơn bạn nhiều.
không được bạn à, đang mừng, chua tìm được code để lấy thông tin profile
Thạnks, bài post rất hay
www.BantinForex.tk
Rất hay, cám ơn bạn
Ý kiến của bạn