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.