Header ads

Tùy chỉnh mẫu phân cấp bình luận cho blogger kiểu 2

Tiếp tục với bài mà mình chia sẽ về cách phân cấp comment đẹp cho blogspot, bài này mình cũng chia sẽ một kiểu phân cấp comment tương tự nhưng có cải tiến một chút, đồng thời cũng hiển thị lên trên kết quả tìm kiếm về số lượt nhận xét bình luận luôn



 Mục ngày tháng thay vì để ở trên đầu thì nay được bố cục lại phía dưới trông gọn gàng hơn


Các bạn có thể tham khảo thêm bài: Cách tạo phân cấp comment kiểu 1


Cách làm cũng tương tư như bài trước, bao gồm  bước

Bước 1


Thêm thẻ b:include trên widget blog 1

<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='&quot;c&quot; + 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, &quot;1:1&quot;)'/>
              <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='&quot;#&quot; + 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='&quot;c&quot; + data:firstlevel.id + &quot;-rt&quot;'>
                <ol class='thread-chrome thread-expanded' expr:id='&quot;c&quot; + data:firstlevel.id + &quot;-ra&quot;'>
                  <b:loop values='data:post.comments' var='secondlevel'>
                    <b:if cond='data:secondlevel.inReplyTo == data:firstlevel.id'>
                      <li class='comment' expr:id='&quot;c&quot; + 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, &quot;1:1&quot;)'/>
                          <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='&quot;#&quot; + 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='&quot;c&quot; + data:secondlevel.id + &quot;-rt&quot;'>
                            <ol class='thread-chrome thread-expanded' expr:id='&quot;c&quot; + data:secondlevel.id + &quot;-ra&quot;'>
                              <b:loop values='data:post.comments' var='thirdlevel'>
                                <b:if cond='data:thirdlevel.inReplyTo == data:secondlevel.id'>
                                  <li class='comment' expr:id='&quot;c&quot; + 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, &quot;1:1&quot;)'/>
                                      <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='&quot;c&quot; + data:secondlevel.id + &quot;-ce&quot;'/>
                      </li>
                    </b:if>
                  </b:loop>
                </ol>
              </div>
            </div>
            <div class='comment-replybox-single' expr:id='&quot;c&quot; + data:firstlevel.id + &quot;-ce&quot;'/>
            <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>

Bước 2


Thay  <data:post.commentHtml/>      bằng thẻ <b:include data='post' name='commentsContent'/>


Bước 3


Tao style cho khung comment như bên dưới. Các bạn vẫn đặt code này trước thẻ đóng </body> như cũ nhé

<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(//4.bp.blogspot.com/-9TaHwQSt4ps/WfdMSWzDpAI/AAAAAAAAQgE/lwRBOH-oCWQVR-UDuoXZGFHUc4A1B99cQCLcBGAs/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>



Góc Bình Luận

3 Comments

Chia sẽ của bạn ở đây nhé.