Gắn ảnh cho bài viết có nhiều nhận xét trong blogger

Đây là thủ thuật gắn hình ảnh cho Bài đăng có nhiều Nhận xét. Tùy theo cấp độ số lượng Nhận xét trong Bài đăng đó mà được gắn hình ảnh khác nhau, hình thức gần giống với tiện ích Đánh giá Bài đăng. Ở đây mình chia cấp độ số lượng Nhận xét trong Bài đăng thành 3 nhóm nhỏ: Đông vui, Sôi động và 100 độ.
Ảnh minh họa!

Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi mẫu mã blogger của bạn, Chúng tôi khuyến khích bạn để sao lưu nó, bằng cách nhấp vào liên kết Mẫu => Sao lưu/Khôi phục => Tải về (Download Template Full Version).

 ☼ Cách tiến hành:

1- Đăng nhập (Login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Chọn  mở rộng tiện ích mẫu.
4- Tìm kiếm thẻ ]]></b:skin> và thêm vào trước nó đoạn CSS sau:

.post{position:relative}
.groupcomment{position:absolute;top:0px;right:-32px;border:0 none !important;width:64px;height:30px}

- top:0px;right:-32px; là tọa độ của ảnh so với class post. Hãy chỉnh giá trị của thuộc tính top và right cho phù hợp với blog của bạn.

5- Thêm đoạn mã dưới đây vào sau thẻ </head> trong template của bạn.

<script type='text/javascript'>var groupcomment1=10;groupcomment2=50;groupcomment3=100;</script>

- Trong code trên lần lượt nếu:

• Số lượng Nhận xét trong Bài đăng lớn hơn 10 thì được gắn ảnh
• Lớn hơn 50 thì được gắn ảnh soi dong
• Lớn hơn 100 thì được gắn ảnh 100 do.  
• Hãy thay 10, 50 và 100 theo ý muốn của bạn.

6- Tìm thẻ

<a expr:name='data:post.id'/>

- và thêm vào sau nó đoạn mã dưới đây:

<script type='text/javascript'>
//<![CDATA[
function gantem(numcomments){if((groupcomment1<=numcomments) && (numcomments<groupcomment2)){document.write('<img alt="dong vui" class="groupcomment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4y9T1PC5dPHZrVcqQXjRmXL5p6fPl1e90Ia4p-wNwIkCGCmXShuyoTf20gnp46Dn90J5nC1iSK3e7XouKjipKmqx0xc9jw_wZoTOtl3fwBfmzVkvGn6MykILrjaLk_KhTKUHRgcOaVE/"/>')}else{if((groupcomment2<=numcomments) && (numcomments<groupcomment3)){document.write('<img alt="soi dong" class="groupcomment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLxCHMkX3UzVvVgOhM4Rg8rrEPzPgZHuj9ZxtoV1gsKID8neNNUQdEZS5lUcrKoPFZGAcpEagMt4Z0MqnJdFlxycLHZswfCseczxWI5KH2VSno7t-nCa2a4rJpfYFigyFspYMGVk3Vm5A/"/>')}else{if(groupcomment3<=numcomments){document.write('<img alt="100 do" class="groupcomment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCjD6-vpD5RAVGUKav0nE3gs82lj3EQ2ZEjjo6MybS1vTULkNUKbgPVCLgr4XAHEm4OrKeQsgzIURCBDUz-jXbg2ectHyXK3B4F3p62mW7KbaU0IQOYp_Neg7KUmx0oBf71CbUR7UUYg/"/>')}}}};
//]]>
</script>
<script type='text/javascript'>gantem(<data:post.numComments/>);</script>

7- Lưu mẫu lại là oke.

Xem thêm Gắn hình ảnh cho bài đăng mới nhất

Theo: Duyham..