Tạo phần Comments Block riêng cho một trang riêng biệt

Trong phần nhận xét trên blogspot, khu vực comments-block chứa các thành phần chính của các nhận xét như avatar, comment-author, comment-body, comment-timestamp. Đoạn code hiển thị các thành phần này nằm giữa 2 thẻ b:loop như sau:

1. <div id='comments-block'>
2. <b:loop values='data:post.comments' var='comment'>
3. ......
4. ......
5. ......
6. ......
7. </b:loop>
8. </div>

Dựa vào cấu trúc này, chúng ta có thể tạo kiểu comments-block riêng cho một bài viết nào đó.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates. Tìm dòng code <b:loop values='data:post.comments' var='comment'> rồi đặt trước nó bằng đoạn code như sau:

1. <b:if cond='data:blog.url == "URL_trang_riêng biệt"'>
2. <b:loop values='data:post.comments' var='comment'>
3. … Đoạn code xác định các thành phần nhận xét riêng biệt ở đây …
4. </b:loop>
5. <b:else/>

Tiếp theo tìm đến thẻ đóng </b:loop> cho thẻ <b:loop values='data:post.comments' var='comment'> nói trên rồi đặt sau nó bằng thẻ đóng </b:if>.

Trong đoạn code thêm vào, bạn cần thiết kế kiểu comments-block riêng để tạo sự khác biệt với phần comments-block ở các trang khác (nhớ thay URL cho trang riêng biệt để áp dụng thủ thuật).

Tựu trung lại, toàn bộ đoạn code sau khi thêm sẽ như thế này:

1. <b:if cond='data:blog.url == "URL_trang_riêng biệt"'>
2. <b:loop values='data:post.comments' var='comment'>
3. … Đoạn code xác định các thành phần nhận xét riêng biệt ở đây …
4. </b:loop>
5. <b:else/>
6. <b:loop values='data:post.comments' var='comment'>
7. … Đoạn code xác định các thành phần nhận xét chung cho các trang khác ở đây …
8. </b:loop>
9. </b:if>

Bước 2. Đặt CSS theo định dạng như sau vào trước thẻ </head>.

1. <b:if cond='data:blog.pageType == "item"'>
2. <b:if cond='data:blog.url == "URL_trang_riêng biệt"'>
3. <style>
4. … đặt code CSS của phần Comments cho trang riêng biệt tại đây …
5. </style>
6. <b:else/>
7. <style>
8. … đặt code CSS chung của phần Comments cho tất cả các trang còn lại tại đây …
9. </style>
10. </b:if>
11. </b:if>

Lưu Template. Thủ thuật cho bạn thêm một tình huống sử dụng lệnh điều kiện để tạo nét độc đáo cho blogspot. DEMO cho thủ thuật này chính là phần nhận xét dưới đây. Nếu chú ý kỹ bạn sẽ thấy sự khác biệt so với các bài viết khác.