Để thực hiện thủ thuật, bạn làm như sau. Tuy có chút rắc rối nhưng mong bạn sẽ thực hiện thành công:
1. Đăng nhập vào Blogger > Thiết kế > Chỉnh sửa HTML và Mở rộng mẫu tiện ích.
2. Nhấn "CTRL+F" tìm đoạn code:
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>3. Thay thế đoạn code ở bước 4 vào đoạn code dưới ( Nhớ lưu lại đoạn code ở bước 3 để tý nữa ta qua bc 4 sẽ lấy lại đoạn code ở bước 3 để thay thế cho đoạn code bước 4).
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>4. Bước này ta thay thế ngược lại đó là lấy đoạn code ở b3 để thay thế cho đoạn code này:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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>
<div class='comments'>
<b:loop values='data:post.comments' var='comment'>
<div id='comments-outer'>
<div class='comment-author'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img class='avatar' expr:src='data:comment.favicon' height='35px' rel='dofollow' width='35px'/>
</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'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<span class='says'>said on :</span>
</dt><span style='float: left;'><b:include data='comment' name='commentDeleteIcon'/></span>
<div class='comment-meta commentmetadata'>
<data:comment.timestamp/>
</div>
</div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:loop>
</div>
5. Bây giờ đến phần chỉnh sửa CSS, nhưng trước khi thêm đoạn code CSS các bạn xóa đoạn code CSS cũ của Template mà bạn đang sử dụng và bạn xóa đoạn code sau ( tùy mỗi template mà các bạn xóa như thế nào nha). Để thấy rõ, bạn nhìn vào hình sau:
Nếu có khó khăn gì, bạn hãy để lại comment bên dưới.
6. Tìm đến ]]></b:skin> và thêm đoạn code bên dưới lên trên nó.
#comments{7. Lưu Templates và bạn sẽ thấy có thêm Wordpress Style Comments Section. Chúc thành công !
background : #fff url() no-repeat top;
float : left;
width : 590px;
font-size:12px}
#comments h4{ margin:1em 0; font-weight:bold; font-size:15px; text-shadow:1px 1px 1px #ddd; line-height:1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor}
#comments-outer{ background:#f4f4f4; border:1px solid #ddd; margin:1em 0 2.5em; padding:10px; line-height:1.6em}
.avatar-image-container{margin-right:20px; padding:0; float:right; width:48px; height:48px; margin-top:-20px}
.avatar-image-container img{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7FRSIxZF7SXJD4N61OYAnQTnvS_2D0vScb-pTuqGqFNjaaeZq38WvqLSjr2U0N6NyQVOnFoWTr7HRm_J9eZx2HT3OWlA3wG8MI-5g4T9v6p7lG61JKBV5sX8Vc63ZsSrOMjdzk3-x13U/s400/grav.png); width:48px; height:48px; border:1px solid #ddd}
.deleted-comment{ font-style:italic; color:gray}
.comment-body-author{background:#f4f4f4}
Đăng nhận xét