Chia sẻ thủ thuật blogspot - blogger

luat1x1

11/23/2011

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(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 this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

1 nhận xét

  1. Mình đã thử làm nhưng với một những tiêu đề dài thì nó bị xuống dòng nhìn rất sấu. Làm sao để hiển thị một tiêu đề ngắn thay cho một tiêu đề quá dài trên blogger nhỉ?

    Trả lờiXóa

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top