Số Thứ Tự Comments (bằng hình Ảnh)

™» CGC Blog «™ Đã hiểu hơn về thủ thuật tùy biến comment qua các bài viết đánh dấu comment của author, đánh số cho cho comment, hiển thị “bubble” số comment ngay tiêu đề bài viết … lần này giới thiệu tiếp với bạn thủ thuật để đánh số và tùy biến số thứ tự của comment đã có.

- VnBlognet [dot] com: Như bài thủ thuật về đánh số đã giới thiệu nhưng thủ thuật mới này giúp bạn tùy biến và chỉnh sửa code CSS một cách pro hơn để số thứ tự gán cho các comment nhìn chuyên nghiệp và đẹp mắt hơn.

Cách thức thực hiện như sau:

Truy cập vào Blogger:

- Truy cập vào Blogger Bảng điều khiển (Dashboard) >> Bố cục (Layout) >> Chỉnh sửa HTML (Edit HTML) >> click vào ô check Mở rộng mẫu tiện ích (Expand Widget Templates)

Thêm code CSS vào Template:

- Tìm (Ctrl-F) và thay thế đoạn mã </head> bằng đoạn mã dưới:

< !--COMM-NUM-STARTS-->
< style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}
< /style>
< !--COMM-NUM-STOPS-->
< /head>

Trong đó:

• Đoạn code màu đỏ là đoạn hiển thị hình ảnh
• Đoạn code màu xanh hiển thị màu sắc của số đếm.

Chèn code HTL vào Template:
- Tìm (CTRL+F) và thay thế đoạn code :

<b:loop values='data:post.comments' var='comment'>

bằng đoạn code sau:

<script type='text/javascript'>var CommentsCounter=0;</script><b:loop values='data:post.comments' var='comment'>

- Tìm tiếp đoạn code:

<data:commentPostedByMsg/>

và thay thế chúng bằng đoạn mã:

<data:commentPostedByMsg/>
< !--COMM-NUM-STARTS-->
<span class='comm-num'>
< a expr:href='data:comment.url' title='Comment Link'>
< script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
< /script>
< /a>
< /span>
< !--COMMNUM-STOPS -->

- Lưu mẫu lại .

Tùy biến hình ảnh nền hiển thị số comment:

- Trong bước 2 bạn đã chèn code CSS vào mẫu, trong bước này bạn có thể tùy biến hình ảnh nền (background) hiển thị số thứ tự comment bằng cách thay địa chỉ URL của hình ảnh.
- Bạn có thể lựa chọn một trong số các hình ảnh dưới bằng cách click chuột phải và chọn Copy image URL để lấy địa chỉ của hình ảnh

---

---

---

 

---

Chúc các bạn thành công !

Nguồn : thuthuatblogger.info

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!