Tạo bộ đếm comments kiểu bong bóng

Tạo bộ đếm nhận xét bài đăng nằm trên tiều đề bài viết làm cho blog của bạn hấp dẫn hơn cho khách truy cập.Việc làm giúp người đọc có thể biết được bài đăng nào nhiều nhận xét và họ có thể truy cập vào đó.Việc thêm bong bóng bình luận nhỏ ở phía trên tiêu đề bài viết làm cho blog bạn nhiều khách truy cập hơn....:D

Để thực hiện thủ thuật, bạn làm như sau:

Bước 1: Đăng nhập vào Blogger > Thiết kế > Chỉnh sửa HTML  và chọn vào Mở rộng mẫu tiện ích.

Bước 2: Thêm đoạn code bên dưới vào trước dòng ]]></b:skin>

.comment-bubble {<br /> float : right;<br /> width : 300px;<br /> height : 300px;<br /> background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis17a77qzSjcKCFMbAnqKo5TydF387RoTcPmCGfRMQew3V3MJMveo6its05zeZe2vekj5IUdKnCVxxhjeHL-QtPt6vD9mS8JSoFVGhWyIYWDn_xxu70k_F9QZo_VuAG-sX5v3-AqoDXF4A/s1600/Comment+Bubble+%2815%29.png) no-repeat;<br /> font-size : 18px;<br /> margin-top : -15px;<br /> margin-right : 2px;<br /> text-align : center;<br /> position:absolute;<br /> }<br />

Bạn có thể chỉnh sửa các thông số hình ảnh trong đoạn code trên :

width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis17a77qzSjcKCFMbAnqKo5TydF387RoTcPmCGfRMQew3V3MJMveo6its05zeZe2vekj5IUdKnCVxxhjeHL-QtPt6vD9mS8JSoFVGhWyIYWDn_xxu70k_F9QZo_VuAG-sX5v3-AqoDXF4A/s1600/Comment+Bubble+%2815%29.png)

Lưu ý: Nếu ảnh ko nằm về phía bên phải bạn bỏ đoạn code position:absolute;

Bước 3: Tìm đoạn code bên dưới và thay thế đoạn code màu đỏ:

<b:includable id='post' var='post'> <div class='post hentry uncustomized-post-template'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if> <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/><data:post.title/> </b:if> </b:if> </h3> </b:if>

Lưu Templates và xem kết quả. Chúc vui!!

     Ghi chú:

 Bạn có thể thay đổi hình ảnh ở Bước 2 bằng các hình khác.Link download bộ hình ở đây