Author Panel giới thiệu về tác giả

Chúng ta đã từng biết đến cách tạo Author Panel giới thiệu sơ nét về tác giả bài viết và khung tác giả thường được đặt ở cuối bài viết ở các trang item. Thế thì liệu chúng ta có thể làm điều tương tự ở trang chủ và trang nhãn hay không. Mình sẽ giúp bạn làm được điều này bằng cách gắn tem Avatar cho tác giả bài viết hiển thị ở trang chính (index) gồm trang chủ, các trang nhãn và trang lưu trữ. Thủ thuật này có thể áp dụng cho blogspot có nhiều tác giả làm cộng tác viên viết bài.

Xem Demo.

Thật thú vị phải không các bạn. Bây giờ còn chờ gì nữa nào, chúng ta cùng thực hiện theo các bước đơn giản để cài đặt vào blogspot của bạn. Xin lưu ý là scipt của mình rất đơn giản ngắn gọn nên không ảnh hưởng gì nhiều đến tốc độ load trang blogspot.

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template. Chọn Expand Widget Templates. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
// Adding Author Avatar Stamp to Label Posts Script by www.thuthuatblogger.info
function author_avatar_stamp (author) {
avatar = new Array()
avatar[0] = ""
avatar[1] = "<img border='0' style="display:block;float:right;width:35px;height:35px;margin:0 auto" src='URL_avatar_tác giả 1'/>"
avatar[2] = "<img border='0' style="display:block;float:right; width:35px;height:35px;margin: 0 auto" src='URL_avatar_tác giả 2'/>"
avatar[3] = "<img border='0' style="display:block;float:right; width:35px;height:35px;margin: 0 auto" src='URL_avatar_tác giả 3'/>"

if (author == "Tên tác giả 1")
{document.write(avatar[1]);}

if (author == "Tên tác giả 2")
{document.write(avatar[2]);}

if (author == "Tên tác giả 3")
{document.write(avatar[3]);}

}
//]]>
</script>

Trong đoạn code trên, bạn cần thay URL dẫn đến Avatar cho các tác giả tương ứng với tên tác giả (có thể thêm số lượng tác giả theo đúng định dạng ở trên), đồng thời có thể tùy biến CSS cho Avatar phù hợp với blogspot của bạn.

Bước 2. Dưới đây là đoạn scipt để gọi avatar ra:

<script type='text/javascript'>
author_avatar_stamp("<data:post.author/>");
</script>

Đặt đoạn code nới trên vào một trong những vị trí bạn có thể cần hiển thị tem avatar như sau:

<div class='post-header-line-1'>

VỊ TRÍ 1 -->

</div>
<div class='post-body entry-content'>

VỊ TRÍ 2 -->

<p>VỊ TRÍ 3 -->
<data:post.body/></p>

Lưu Template là xong.