Truyện Cười BlogTaPhiet KC

Chat Box


--------------:Search

Đang tải...

Thứ Bảy, ngày 05 tháng 11 năm 2011

Tạo số đếm kiểu bong bóng nằm trên tiêu đề bài viết

Nguồn: Sưu tầm.

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(http://1.bp.blogspot.com/_1fRuBdlSpLw/S-_7DPCITWI/AAAAAAAAAXU/EBCsy37ga2U/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(http://1.bp.blogspot.com/_1fRuBdlSpLw/S-_7DPCITWI/AAAAAAAAAXU/EBCsy37ga2U/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
Share/Save/Bookmark

Đăng nhận xét

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa
Top