Laman

Tùy biến Comments Block cho blogspot

4   nhận xét

Để có phần nhận xét (Comments) đẹp cho blogspot thì bạn phải tùy biến hai thành phần quan trọng là comments-block và comment-form. Tiếp sau bài hướng dẫn tạo Comment Form đẹp, bài viết này sẽ hướng dẫn cách tạo một Comments Block đẹp.

Bạn có thể xem một ví dụ Demo ở hình minh họa bên dưới.


Nào chúng ta cùng thực hiện theo các bước như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa comments-block, tìm đến đoạn code như bên dưới.

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

Thay toàn bộ đoạn code trên bằng đoạn code bên dưới.

<div id='comments-block1'>
<b:loop values='data:post.comments' var='comment'>
<div class='comments-block'>
<div class='comments-wrapper'>
<div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<div class='comments-avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>

<div class='comments-meta'>
<strong>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a class='comments-autor-name' expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<a class='comments-autor-name'> <data:comment.author/></a>
</b:if>
</strong>
<div class='comments-timestamp'>
<span class='comment-timestamp'>
<a class='comment-permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
</div>

<div class='comments-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<div class='arrow'></div>
<p><data:comment.body/></p>
</b:if>
</div>
</div>
</div>
</div>
</b:loop>
</div>

Bước 2. Đặt code CSS bên dưới vào trước dòng ]]</b:skin>.

(Lưu ý trước khi thực hiện Bước 2, hãy dùng từ khoá comments tìm đến code CSS liên quan rồi xóa hết)

#comments-block1 {padding-left:10px}
.comments h4{padding:10px 0 20px 0}
.comments-wrapper{border-bottom:1px solid #e1e1e1;margin-bottom:10px}
.comments-wrapper:last-child{border-bottom:none}
.comments-block{padding:0 10px}
.comments-meta{font-size:.857em;text-align:right;line-height:1.286em;width:98px;float:left;padding-top:16px}
.comments-meta a:hover{text-decoration:none;border-bottom:1px dotted #004A80}
.comments-timestamp{font-size:.857em}
.comments-avatar{float:right}
.comments-body{font-size:0.857em;background:#FFF;margin:10px 0 15px 113px;border:1px solid #E1E1E1;-moz-border-radius:5px;-webkit-border-radius:5px;padding:10px;width:400px}
.comments-body .arrow{width:0;height:0;line-height:0;float:left;margin:5px 0 0 -20px;border-bottom:10px solid transparent;border-right:10px solid #fff;border-top:10px solid transparent}
.comments-body a{border-bottom:1px dotted #004A80}
.comments-body a:hover{text-decoration:none;border-bottom:1px solid #004A80}

Chú ý trong đoạn code trên, điều chỉnh width:400px để định chiều rộng phần thân chứa nội dung nhận xét phù hợp với chiều rộng phần comments-block.

Lưu Template là OK.

Bạn hãy nghiên cứu thêm về CSS để tùy biến cho phần Comments Block theo ý muốn của mình nhé.
:44)
To get a long time, watchmakers currently have experimented with any types of understanding, fabric, contour plus cartier replica sale measurements to get all these portions, all of while in the quest for higher resonance, resolution plus live volume level as being the time frame is definitely chimed. Concerning lots of buffs, Jaeger-LeCoultre conceivably would not take advantage of the popularity deserved with regard to their contribution to your growth with echoing know-how. It appears to be too often lost potentially they are the cause of not one but two a lot of radical revolutions, which will now IWC replica sale define the best repeaters. A "silent regulator" plus "cathedral gongs" ended up being either patented around 1895, plus available your goliath leap forward while in the good level of quality qualified to often be made from a relatively minor technical watch. General health Jaeger-LeCoultre pioneering technological advances are merely while in the Expert Grande Lifestyle Grande Unwanted effect, utilizing their operation ameliorated by way of present day, plus seriously striking modern advances. Jaeger-LeCoultre's hottest "trébuchet hammers" develop all around good level of quality of your repeater by way of a bank dual-axis apparatus, which will replica chanel lets the theifs to increase the speed of fast with service, attractive a gongs by using extraordinary compel. The fact is, when common hammer models exclusively make the most of 20% of your whole electricity offered by a repeater-mainspring, a trébuchet hammers will give through 80%.
Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D