Gắn tem Avatar cho bài viết của tác giả ở trang nhãn

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.

More about →

Tại sao nhận xét không hiện Avatar?

Như chúng ta biết thì Blogger đã có chức năng hiển thị ảnh Avatar cho người nhận xét trên blogspot. Gần đây các Template của Blogger đều tích hợp sẵn chức năng này kể cả tạo Avatar mặc định cho phần nhận xét của người nhận xét là nặc danh (Anonymous). Tuy nhiên, nếu bạn dùng các Template cũ trước đây thì để có được tính năng này thì bạn phải sử dụng thủ thuật sau đây.

Bước 1. Đăng nhập Blogger, vào Settings (Cài đặt) >> Comments (Nhận xét) >> Chọn Show Comments và ở mục Show profile images on comments? chọn Yes và nhấn SAVE SETTINGS để lưu cài đặt.

Bước 2. Vào Design >> Edit HTML >> Chọn Expand Widget Templates.

Đặt đoạn code CSS sau đây trước dòng ]]></b:skin>.

.avatar-image-container {
background:url(http://img6.imageshack.us/img6/4889/anonymoush.jpg);
width:35px;
height:35px;
}
.avatar-image-container img { border:none;}

Bước 3. Tìm dòng <dl id='comments-block'>

Và thay nó bằng dòng

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Tiếp tục tìm đến dòng <a expr:name='data:comment.anchorName'/>

Và thay nó bằng đoạn code bên dưới.

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

Lưu Template và kiểm tra ở các nhận xét trên blog của bạn đã hiện Avatar cho người nhận xét hay chưa.

Tôi chắc chắn rằng đa số blogspot sau khi áp dụng thủ thuật này đều cho kết quả OK. Tuy nhiên sẽ có một vài blogspot hy hữu sẽ không hiển thị Avatar. Nguyên do là sao vậy? Tôi cho rằng trước đây chưa có ai lý giải được điều này. Nhưng khi bạn Gấu Nâu tại trang gaunau.info nhờ tôi xử lý vấn đề không hiện Avatar cho blog của bạn ấy thì tôi mới phát hiện ra nguyên nhân, mặc dù bạn ấy đã áp dụng đúng như các bước nêu trên.

Nguyên nhân cơ bản đó là trong Template của bạn Gấu Nâu ở phần CSS chưa có định dạng cho id: comments-block. Để khắc phục vấn đề không hiện Avatar, bạn chỉ cần đặt trước dòng ]]></b:skin> với dòng code bên dưới.

#comments-block{ margin:0 0 1px;line-height:14px}

Tôi đảm bảo sau khi áp dụng cái này, bạn Gấu Nâu sẽ cảm thấy hài lòng với sự giúp đỡ của tôi. Và có thể bạn sẽ không tìm thấy ở đâu trên trái đất này có sự giúp đỡ quá tuyệt vời như thế.

Và các bạn khác, nếu cũng gặp trường hợp tương tự thì hãy xử lý theo cách của tôi nhé. :2)

More about →

Tùy biến Avatar cho người bình luận trên blogspot

Trước đây khi Blogger chưa phát triển tính năng Avatar cho Comment thì việc tạo avatar cho người nhận xét, bình luận trên blogspot là một trong những thủ thuật Blogger rất được quan tâm.

Nhưng ngay cả sau khi Blogger đã có tính năng này rồi thì vẫn còn một số điểm để phát triển thêm. Ví dụ như tạo Avatar riêng cho một người nào đó, mà ngay cả khi người đó viết nhận xét trên blog của bạn trong trường hợp không đăng nhập Blogger mà chỉ đăng nhận xét dưới dạng Tên/URL thì vẫn hiển thị được Avatar của người đó.

Để thực hiện điều này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Tìm đoạn code sau đây.

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Thay nó bằng đoạn code như bên dưới.

<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:comment.authorUrl'>
<b:if cond='data:comment.author == &quot;Tên Người Bình Luận&quot;'>
<span class='avatar-image-container'><img src='URL_Avatar_Người Bình Luận'/></span>
<b:else/>
<data:comment.authorAvatarImage/>
</b:if>
<b:else/>
<span class='avatar-image-container'><img src='URL_Avatar_Nặc danh'/></span>
</b:if>
</b:if>

Trong đoạn code trên, bạn cần thay URL Avatar tương ứng với tên của người bình luận nào đó và URL Avatar của Nặc danh (Anonymous).

Bước 2. Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

#comments-block .avatar-image-container {
margin-right:5px;
}

#comments-block .avatar-image-container img {
float: none;
width:35px;
height:35px;
border:1px solid #000000;
}

Nếu bạn muốn tạo Avatar riêng cho các trường hợp khác (các trường hợp người nhận xét không đăng nhập Blogger, không phải là Anonymous và không được chọn đặt Avatar riêng ở bước 1), thì thêm đoạn code sau vào phần CSS ở trên.

#comments-block .avatar-image-container.avatar-stock {
background:url(URL_Avatar_Các trường hợp khác) transparent no-repeat 50% 50%;}

More about →