Đầu tiên thì các bạn cần đọc và làm theo hướng dẫn của bài viết thêm một cấp reply comment cho Blogger layout v3, bài này mình chỉ chia sẻ lại phần hiển thị nhận xét comments content của blog mình vì mình có chỉnh sửa lại đôi chút so với mặc định. Nếu các bạn thấy hợp thì chèn vào thay thế.
Giao diện nhận xét mình có tùy biến đưa nhận xét lên trên thay cho ngày tháng được đưa xuống dưới cùng với mục trả lời. Ngoài ra mình cũng thêm phần đánh giá xếp hạng bằng số nhận xét, căn cứ vào số nhận xét để đưa ra giá trị xếp hạng và số phiếu bầu. Phần đánh giá xếp hạng này hiển thị bên dưới mỗi bài viết trên các công cụ tìm kiếm chứ không riêng gì Google và sẽ không bao giờ bị xóa trừ khi bạn xóa hoặc tắt nhận xét bài đăng.
Các bạn chỉ cần thay lại trong bước 1 của bài viết cũ bằng thẻ b:includable đã tùy biến của mình, lưu ý các bạn phải làm đầy đủ các bước tiếp theo bài viết cũ nhé
<b:includable id='commentsContent' var='post'>
<div class='comment-thread toplevel-thread' itemprop='' itemscope='' itemtype='http://schema.org/CreativeWorkSeries'>
<span class='hidden' itemprop='name'><data:post.title/></span>
<div itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'>
<meta expr:content='data:post.numberOfComments' itemprop='ratingCount'/>
<b:if cond='data:post.numberOfComments lte 3'>
<meta content='3' itemprop='ratingValue'/>
<b:elseif cond='data:post.numberOfComments in [3,4,5]'/>
<meta content='3.5' itemprop='ratingValue'/>
<b:elseif cond='data:post.numberOfComments in [6,7,8]'/>
<meta content='4' itemprop='ratingValue'/>
<b:elseif cond='data:post.numberOfComments in [9,10,11]'/>
<meta content='4.5' itemprop='ratingValue'/>
<b:elseif cond='data:post.numberOfComments gt 11'/>
<meta content='5' itemprop='ratingValue'/>
</b:if>
<meta content='5' itemprop='bestRating'/>
<meta content='1' itemprop='worstRating'/>
</div>
<ol id='top-ra' itemprop='review' itemscope='' itemtype='http://schema.org/Review'>
<meta expr:name='data:post.title' itemprop='name'/>
<b:loop values='data:post.comments' var='firstlevel'>
<b:if cond='!data:firstlevel.inReplyTo'>
<li class='comment hidden' expr:id='"c" + data:firstlevel.id'>
<div class='avatar-image-container'>
<b:if cond='data:firstlevel.authorPhoto.url'>
<img expr:alt='data:firstlevel.author' expr:src='resizeImage(data:firstlevel.authorPhoto.url, 35, "1:1")'/>
<b:else/>
<img src='https://lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s40' expr:alt='data:firstlevel.author'/>
</b:if>
<b:if cond='data:firstlevel.author == data:post.author.name'>
<span class='verified-user-icon'><svg height='15px' viewBox='0 0 24 24' width='15px'><path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z' fill='#4285F4' paint-order='stroke' stroke='#fff' stroke-width='3px'/></svg></span>
</b:if>
</div>
<div class='comment-block'>
<div class='comment-header'>
<span class='user'><a expr:href='data:firstlevel.authorUrl' expr:title='data:firstlevel.author' rel='noopener nofollow' target='_blank'><span itemprop='author'><data:firstlevel.author/></span></a></span>
<span itemprop='description'><data:firstlevel.body/></span>
</div>
<div class='comment-actions'>
<a class='comment-reply' expr:data-comment-id='data:firstlevel.id' expr:href='"#" + data:firstlevel.id' rel='nofollow' target='_self' title='Trả lời'>Trả lời</a>
<span expr:class='data:firstlevel.adminClass'><a expr:href='data:firstlevel.deleteUrl' expr:title='data:messages.deleteComment' rel='nofollow' target='_self'>Xóa</a></span>
<span class='date-time'>
<meta expr:content='data:firstlevel.timestamp' itemprop='datePublished'/>
<a expr:href='data:firstlevel.url' expr:title='data:firstlevel.timestamp' rel='nofollow' target='_self'><data:firstlevel.timestamp/></a>
</span>
</div>
</div>
<div class='comment-replies hidden'>
<div class='comment-thread secondlevel-thread' expr:id='"c" + data:firstlevel.id + "-rt"'>
<ol class='thread-chrome thread-expanded' expr:id='"c" + data:firstlevel.id + "-ra"'>
<b:loop values='data:post.comments' var='secondlevel'>
<b:if cond='data:secondlevel.inReplyTo == data:firstlevel.id'>
<li class='comment' expr:id='"c" + data:secondlevel.id'>
<div class='avatar-image-container'>
<b:if cond='data:secondlevel.authorPhoto.url'>
<img expr:alt='data:secondlevel.author' expr:src='resizeImage(data:secondlevel.authorPhoto.url, 35, "1:1")'/>
<b:else/>
<img expr:alt='data:secondlevel.author' src='https://lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35' />
</b:if>
<b:if cond='data:secondlevel.author == data:post.author.name'>
<span class='verified-user-icon'><svg height='15px' viewBox='0 0 24 24' width='15px'><path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z' fill='#4285F4' paint-order='stroke' stroke='#fff' stroke-width='3px'/></svg></span>
</b:if>
</div>
<div class='comment-block'>
<div class='comment-header'>
<cite class='user'><a expr:href='data:secondlevel.authorUrl' expr:title='data:secondlevel.author' rel='noopener nofollow' target='_blank'><data:secondlevel.author/></a></cite>
<span><data:secondlevel.body/></span>
</div>
<div class='comment-actions'>
<a class='comment-reply' expr:data-comment-id='data:secondlevel.id' expr:href='"#" + data:secondlevel.id' rel='nofollow' target='_self' title='Trả lời'>Trả lời</a>
<span expr:class='data:secondlevel.adminClass'><a expr:href='data:secondlevel.deleteUrl' expr:title='data:messages.deleteComment' rel='nofollow' target='_self'>Xóa</a></span>
<span class='date-time'><a expr:href='data:secondlevel.url' expr:title='data:secondlevel.timestamp' rel='nofollow' target='_self'><data:secondlevel.timestamp/></a></span>
</div>
</div>
<div class='comment-replies'>
<div class='comment-thread thirdlevel-thread' expr:id='"c" + data:secondlevel.id + "-rt"'>
<ol class='thread-chrome thread-expanded' expr:id='"c" + data:secondlevel.id + "-ra"'>
<b:loop values='data:post.comments' var='thirdlevel'>
<b:if cond='data:thirdlevel.inReplyTo == data:secondlevel.id'>
<li class='comment' expr:id='"c" + data:thirdlevel.id'>
<div class='avatar-image-container'>
<b:if cond='data:thirdlevel.authorPhoto.url'>
<img expr:alt='data:thirdlevel.author' expr:src='resizeImage(data:thirdlevel.authorPhoto.url, 35, "1:1")'/>
<b:else/>
<img expr:alt='data:thirdlevel.author' src='https://lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35'/>
</b:if>
<b:if cond='data:thirdlevel.author == data:post.author.name'>
<span class='verified-user-icon'><svg height='15px' viewBox='0 0 24 24' width='15px'><path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z' fill='#4285F4' paint-order='stroke' stroke='#fff' stroke-width='3px'/></svg></span>
</b:if>
</div>
<div class='comment-block'>
<div class='comment-header'>
<cite class='user'><a expr:href='data:thirdlevel.authorUrl' expr:title='data:thirdlevel.author' rel='noopener nofollow' target='_blank'><data:thirdlevel.author/></a></cite>
<span><data:thirdlevel.body/></span>
</div>
<div class='comment-actions'>
<span expr:class='data:thirdlevel.adminClass'><a expr:href='data:thirdlevel.deleteUrl' expr:title='data:messages.deleteComment' rel='nofollow' target='_self'>Xóa</a></span>
<span class='date-time'><a expr:href='data:thirdlevel.url' expr:title='data:thirdlevel.timestamp' rel='nofollow' target='_self'><data:thirdlevel.timestamp/></a></span>
</div>
</div>
</li>
</b:if>
</b:loop>
</ol>
</div>
</div>
<div class='comment-replybox-single' expr:id='"c" + data:secondlevel.id + "-ce"'/>
</li>
</b:if>
</b:loop>
</ol>
</div>
</div>
<div class='comment-replybox-single' expr:id='"c" + data:firstlevel.id + "-ce"'/>
<div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'>
<meta content='1' itemprop='worstRating'/>
<meta content='4' itemprop='ratingValue'/>
<meta content='5' itemprop='bestRating'/>
</div>
</li>
</b:if>
</b:loop>
</ol>
<div class='loadmore hidden' expr:data-post-id='data:post.id'><a expr:title='data:messages.showMore' href='#loadmore' rel='nofollow' role='button' target='_self'><data:messages.showMore/></a></div>
<div class='showless hidden'><a href='#showless' rel='nofollow' role='button' target='_self' title='Thu gọn'>Thu gọn</a></div>
</div>
</b:includable>
Style cho phần hiển thị nhận xét
<b:tag name='style'>/* <![CDATA[ */
#comment-editor{min-height:89.5px}
.thread-locked-alert{background-color: #f2f6fb;margin:20px 0 0;padding:15px;position:relative;border:1px solid #dadce0;border-radius:3px;overflow-x:hidden}
.comment{list-style-type:none;position:relative}
.comment-replybox-single>.commentForm,.comment:not(:last-child),#comments .loadmore,#comments .showless,.calcel-reply{margin-bottom:15px}
.comment>.avatar-image-container{position:absolute;height:35px;width:35px}
.comment-replies .avatar-image-container{height:30px;width:30px}
.comment .avatar-image-container img{border-radius:50%;height:100%;width:100%}
.avatar-image-container img{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ3guqHCpJl76CoYLlDqgSmeRyz9MQ7U8-9IAjaibWv5cnOSRcmZfrnu-OlQaI4C1Qatu8h_wbviJk-ra05FnIEIvkclLVh-eF5zv2oa22n1u0Cccz-9Eon-HrXGxDFOt_8gNUk7jhQzg/s1600/no-image.png) no-repeat center}
.avatar-image-container span{bottom:15px;position:absolute;right:-6px;display:inline-block;height:15px;width:15px}
.comment-replies .avatar-image-container span{bottom:13px}
.comment-replies .avatar-image-container svg{width:13px;height:13px}
.comment .comment-block{margin:0 0 0 45px}
.comment-replies .comment-block{margin:0 0 0 40px}
.comment .comment-replies{margin:15px 0 0 40px}
.comment .view-replies{margin:10px 0 0 45px}
.comment .view-replies>span{font-size:15px;font-weight:bolder;color:#1a73e8}
.comment .comment-replybox-single{margin:15px 0 0 45px}
.comment .comment-header>.user{color:#2d2d2d;font-style:normal;font-weight:normal}
.comment .comment-header>.user>a,.comment .comment-header>span a{color:#1a73e8}
.comment .comment-header>span{line-height:1.4}
.comment .comment-actions{display:flex;align-items:center;font-size:12px;font-weight:normal;text-transform:uppercase;position:relative;padding-top:5px}
.comment .reactions-iframe{width:85px;height:20px;position:relative}
.comment .reactions-iframe>iframe{position:absolute;left:-10px;top:-2px;height:20px;width:96px}
.comment .comment-actions a{color:#2d2d2d;opacity:.8}
.comment .continue{display:none}
.comment .continue a.comment-reply{font-size:13px;color:#2d2d2d;text-transform:uppercase}
.comment .comment-actions a.comment-reply,.comment .comment-actions span.blog-admin{padding-right:10px}
.postAComment{margin:20px 0;font-weight:normal}
.comment-form.spinner{height:93px}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
#comments .loadmore>a,#comments .showless>a{color:#2d2d2d}
.comment-thread.inline-thread.hidden{display:block}
/* ]]> */</b:tag>
Các bạn đọc tham khảo thêm các bài viết trong chuyên mục riêng về comment form của mình, 2 hình minh họa dưới đây cho các bạn dễ hình dung
 |
| Giao diện nhận xét |
 |
| Hiển thị đánh giá trên kết quả tìm kiếm |
Của e làm nó không hiện comment reply a ạ
Trả lờiXóaLink :https://www.templatexyz.com/2019/11/galaxymag-responsive-blogger-template-premium-download-free.html
em tham khảo link và chèn trong widget Blog https://anotepad.com/notes/kmhkqs5, em thay lại 4 thẻ b:includable, chèn script trước thẻ đóng </body>
Xóa