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

Posted by chiasedamme on Wednesday, January 5, 2011

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%;}

{ 0 comments... read them below or add one }

Post a Comment