Khung Hiển Thị Nội Dung Comment 2 Cấp Đẹp Cho Blogger



Hello!! Các bạn có thấy khung hiển thị comment của mình có hấp dẫn và kích thích không ạ?? Nếu các bạn thích thì sau đây mình sẽ hưỡng dẫn các bạn làm nhé

Đầu tiên các bạn xóa hết nội dung của mấy includable này đi

  • <b:includable id="addComments"></b:includable>
  • <b:includable id="commentAuthorAvatar"></b:includable>
  • <b:includable id="commentDeleteIcon" var="comment"></b:includable>
  • <b:includable id="commentForm" var="post"></b:includable>
  • <b:includable id="commentFormIframeSrc" var="post"></b:includable>
  • <b:includable id="commentItem" var="comment"></b:includable>
  • <b:includable id="commentList" var="comments"></b:includable>
  • <b:includable id="commentPicker" var="post"></b:includable>
  • <b:includable id="comments" var="post"></b:includable>
  • <b:includable id="commentsLink"></b:includable>
  • <b:includable id="iframeComments" var="post"></b:includable>
  • <b:includable id="threadedCommentForm" var="post"></b:includable>
  • <b:includable id="threadedCommentJs" var="post"></b:includable>
  • <b:includable id="threadedComments" var="post"></b:includable>

    Tiếp theo các bạn thêm includable dưới đây xuống dưới thẻ <b:includable id="threadedComments" var="post"></b:includable>
    <b:includable id='threadedComments-modifV2' var='post'>
                      <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
                        
                        <b:include name='commentsTitle'/>
                        
                        <b:if cond='data:post.numberOfComments &gt; 0'>
                          <div class='comments-content'>
                            <ol id='comment-holder'>
                              <b:loop values='data:post.comments where (c =&gt; not c.inReplyTo)' var='commentLevel1'>
                                <li class='comment' expr:id='&quot;c&quot; + data:commentLevel1.id'>
                                  <b:class cond='data:post.adminClass' name='author-comment'/>
                                  <b:class cond='not data:post.adminClass' name='user-comment'/>
                                  <b:include data='{level: data:commentLevel1,d: true}' name='commentblock'/>
                                  <!--<div class='comment-actions'>
                                    <span class='reply-to' expr:data-reply-to='data:commentLevel1.id'>Balas</span>
                                  </div>-->
                                  <b:with value='data:post.comments where (c =&gt; c.inReplyTo == data:commentLevel1.id)' var='commentL2'>
                                    <b:if cond='data:commentL2.size != &quot;0&quot;'>
                                      <div class='comment-replies'>
                                        <input class='thread-show hidden' expr:id='&quot;off-&quot; + data:commentLevel1.id' type='checkbox'/>
                                        <div class='comment-thread inline-thread' expr:id='&quot;c&quot; + data:commentLevel1.id + &quot;-rt&quot;'>
                                          <label class='thread-toggle thread-expanded' expr:for='&quot;off-&quot; + data:commentLevel1.id'>
                                            <svg class='thread-arrow line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='6 9 12 15 18 9'/></svg>
                                            <span class='thread-count'>Balasan</span>
                                          </label>
                                        
                                          <ul class='thread-chrome thread-expanded'>
                                            <b:loop values='data:commentL2' var='commentLevel2'>
                                              <li class='comment' expr:id='&quot;c&quot; + data:commentLevel2.id'>
                                                <b:class cond='data:post.adminClass' name='author-comment'/>
                                                <b:class cond='not data:post.adminClass' name='user-comment'/>
                                                <b:include data='{level: data:commentLevel2,d: true}' name='commentblock'/>
                                              </li>
                                            </b:loop>
                                          </ul>
                                          
                                        </div>
                                        <b:if cond='data:post.allowNewComments'>
                                          <div class='comment-reply'>
                                            <a class='reply-to' expr:data-reply-to='data:commentLevel1.id' href='javascript:;' target='_self'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='15 14 20 9 15 4'/><path d='M4 20v-7a4 4 0 0 1 4-4h12'/></svg>Balas</a>
                                          </div>
                                        </b:if>
                                      </div>
                                    </b:if>
                                  </b:with>
                                  
                                  <b:if cond='data:commentL2.size != &quot;2&quot; and data:post.allowNewComments'>
                                    <div class='comment-actions secondary-text'>
                                      <a class='comment-reply reply-to' expr:data-comment-id='data:commentLevel1.id' expr:data-reply-to='data:commentLevel1.id' href='javascript:;' target='_self'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='15 14 20 9 15 4'/><path d='M4 20v-7a4 4 0 0 1 4-4h12'/></svg>Balas</a>
                                    </div>
                                  </b:if>
                                </li>
                              </b:loop>
                            </ol>
                          </div>
                          
                          <b:if cond='data:post.allowNewComments'>
                            <div class='comment-add'>
                              <script>var comment = true;</script>
                              <div aria-label='Berkomentar' class='hidden' id='addcomment' role='button'><data:messages.postAComment/></div>
                            </div>
                          </b:if>
                          <b:else/>
                          <script>var comment = false;</script>
                        </b:if>
                        
                        <div class='comment-form'>
                          <b:if cond='data:post.allowNewComments'>
                            <div id='threaded-comment-form'>
                              <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
                                <p><data:this.messages.blogComment/></p>
                              </b:if>
                              <iframe class='blogger-iframe-colorize blogger-comment-from-post' expr:data-src='data:post.commentFormIframeSrc appendParams {skin: &quot;contempo&quot;}' expr:src='data:post.commentFormIframeSrc appendParams {skin: &quot;contempo&quot;}' height='296' id='comment-editor' name='comment-editor' width='100'/>
                            </div>
                            <b:else/>
                            <div class='comment-disable'>
                              <data:post.noNewCommentsText/>
                            </div>
                          </b:if>
                        </div>
                        
                        <b:if cond='data:showCmtPopup'>
                          <div id='comment-popup'>
                            <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'/>
                          </div>
                        </b:if>
                      </section>
                      
                      <b:if cond='data:post.allowNewComments'>
                        <script>/*<![CDATA[*/ document.addEventListener("DOMContentLoaded", function() { var a=document, b = a.getElementById("comment-editor"), d = b.getAttribute("data-src"); if (b.setAttribute("src", d), 1 == comment) { var f = a.getElementsByClassName("reply-to"), c = a.getElementById("threaded-comment-form"), h = f.length, k = function(b, d, e, f) { b.addEventListener("click", function() { var c = b.getAttribute("data-reply-to"); a.getElementById("c" + c).appendChild(d); a.getElementById("threaded-comment-form").className = 'comment-replybox-single'; a.getElementById("addcomment").className = 'comment-reply button outline'; e.src = f + "&parentID=" + c }) }; for (i = 0; i < h; i++) k(f[i], c, b, d); var l = a.getElementsByClassName("comment-form")[0]; a.getElementById("addcomment").addEventListener("click", function() { l.appendChild(c); a.getElementById("threaded-comment-form").className = 'comment-replybox-thread'; a.getElementById("addcomment").className = 'comment-reply hidden'; b.src = d }) } }); /*]]>*/</script>
                        </b:if>
                        </b:includable>  

    Và thẻ includable này ở dưới thẻ <b:includable id="commentForm" var="post"></b:includable>
    <b:includable id='commentblock' var='cb'>
                      <div class='avatar-image-container'>
                        <div>
                          <b:if cond='data:cb.level.authorAvatarSrc != &quot;//resources.blogblog.com/img/blank.gif&quot;'>
                            <img class='post-thumb lazy' expr:alt='data:cb.level.author' expr:data-src='resizeImage(data:cb.level.authorAvatarSrc, 100, &quot;1:1&quot;)' expr:title='data:cb.level.author' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
                          </b:if>
                        </div>
                      </div>
                      
                      <div class='comment-block' itemscope='itemscope' itemtype='https://schema.org/Comment'>
                        <div class='comment-header'>
                          <b:if cond='data:cb.level.author != &quot;Anonymous&quot;'>
                            <span class='user' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
                              <span itemprop='name'><data:cb.level.author/></span>                          
                              <b:if cond='data:post.author.name == data:cb.level.author'>
                                <svg class='icon blog-author' viewBox='0 0 24 24'><path d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z'/></svg>
                              </b:if>
                            </span>
                          </b:if>
                          <span class='datetime secondary-text' itemprop='datePublished'>
                            <a expr:href='&quot;#c&quot; + data:cb.level.id' itemprop='url'>
                              <data:cb.level.timestamp/>
                            </a>
                          </span>
                        </div>
    
                         <div class='comment-content' itemprop='text'>
                           <!--<b:if cond='data:cb.level.authorUrl != data:post.author.profileUrl'>-->
                             <b:eval expr='data:cb.level.body snippet { links: false }'/>
                             <!--<b:else/>
                             <data:cb.level.body/>
                           </b:if>-->
                        </div>
                        
                      </div>
                      
                      <!--<b:if cond='data:cb.d and data:commentL2.size != &quot;2&quot;'>
                        <div class='comment-actions secondary-text'>
                          <a class='comment-reply reply-to' expr:data-comment-id='data:commentLevel1.id' expr:data-reply-to='data:commentLevel1.id' href='javascript:;' target='_self'>Balas</a>
                          <span expr:class='&quot;item-control &quot; + data:cb.level.adminClass'>
                            <a expr:href='data:cb.level.deleteUrl' expr:title='data:messages.deleteComment' rel='noopener external nofollow' target='_self'>Hapus</a>
                          </span>
                        </div>
                      </b:if>-->
                    </b:includable>

    Tìm thẻ này <b:includable id='postCommentsAndAd' var='post'> và dán đoạn code dưới đây vào

    <b:include cond='data:view.isPost and !data:view.isPreview and data:post.allowComments' data='post' name='threadedComments-modifV2'/>

    Nhớ xóa thẻ gọi commentPicker đi nha

    Thêm CSS dưới đây vào trong thẻ ]]></b:skin> hoặc bạn có thể nhét vào thẻ <style> </style>

    /* Post Comment */
    #showComments, #disqus_thread{margin-top:30px;text-align:center;}
    #showComments:target, #showComments + #comments{display:none} #showComments:target + #comments{display:block}
    .show-comment a, .comment-add .comment-reply{display:block;padding:18px 20px;border:1px solid #505050;border-radius:5px;font-size:13px;color:#505050;text-align:center}
    .comment-add .comment-reply.hidden{display:none}
    .show-comment a:hover, .comment-add .comment-reply:hover{border-color:#989b9f;color:#989b9f}
    .comments{margin-top:30px}
    .comments .comments-content{margin-bottom:35px}
    .comments .comment-disable{text-align:center}
    .comments ol, .comments ul{list-style:none;margin:0;padding:0}
    .comments li{position:relative;padding:15px 20px;border-radius:8px;background-color:rgba(255,255,255,.7);box-shadow:0 4px 12px 0 rgba(9,32,76,.05)}
    .comments li:not(:last-child){margin-bottom:15px}
    .comments li a{color:inherit}
    .comments li .avatar-image-container{display:flex;align-items:center;position:absolute;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#ebeced url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='M16,17a8,8,0,1,1,8-8A8,8,0,0,1,16,17ZM16,3a6,6,0,1,0,6,6A6,6,0,0,0,16,3Z' fill='rgba(0,0,0,.1)'/><path d='M23,31H9a5,5,0,0,1-5-5V22a1,1,0,0,1,.49-.86l5-3a1,1,0,0,1,1,1.72L6,22.57V26a3,3,0,0,0,3,3H23a3,3,0,0,0,3-3V22.57l-4.51-2.71a1,1,0,1,1,1-1.72l5,3A1,1,0,0,1,28,22v4A5,5,0,0,1,23,31Z' fill='rgba(0,0,0,.1)'/></svg>") center / 18px no-repeat;transition:all .2s ease-out;-webkit-transition:all .2s ease-out}
    .comments li .avatar-image-container img{margin:auto;width:40px}
    .comments li .comment-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;height:40px;margin:0 0 20px 50px;padding:3px 0}
    .comments li .comment-header .datetime{width:100%;font-size:11px;color:#989b9f}
    .comments li .comment-header .datetime a{color:inherit}
    .comments li .comment-header .user{flex:0 0 auto;display:flex;align-items:flex-start;font-size:13px;font-weight:700;font-family:'Nunito Sans', sans-serif;color:#161617}
    .comments li .comment-header .user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
    .comments li .comment-header .user svg{width:16px;height:16px;fill:#519bd6;margin:0 0 0 5px}
    .comments li .comment-header .user .blog-author{display: block;background-color: #e4e6eb;margin-left: 5px;border-radius: 4px;font-size: 11px;padding-left: 4px;padding-right: 4px;font-weight: 600;color: #65676b;}
    .comments li .comment-actions, .comments li .comment-replies .comment-reply{margin:10px 0 0 auto;font-size:13px}
    .comments li .comment-replies + .comment-actions{display:none}
    .comments li .comment-replies{margin:10px 0 0 auto}
    .comments li .comment-replies .thread-toggle,
    .comments li .comment-replies .comment-reply a, .comments li .comment-actions a{display:inline-flex;align-items:center;font-size:13px;}
    .comments li .comment-replies .thread-toggle svg, .comments li .comment-replies .comment-reply svg, .comments li .comment-actions svg{width:14px;height:14px;margin-right:5px;stroke:#505050}
    .comments li .comment-replies .thread-show:checked + .comment-thread .thread-toggle svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
    .comments li .comment-replies .thread-show:checked + .comment-thread .thread-chrome,
    .comments li .comment-replies .thread-show:checked + .comment-thread + .comment-reply{display:none}
    .comments li .comment-replies .thread-chrome{margin-top:20px}
    .comments li .comment-replies .comment-reply{width:calc(100% - 55px);display:flex;align-items:center;}
    .comments li .comment-replybox-single{margin-top:20px}
    .comments li li{display:flex;align-items:flex-start;flex-wrap:wrap;padding:0;background-color:transparent;box-shadow:none}
    .comments li li:not(:last-child){margin-bottom:10px}
    .comments li li .avatar-image-container{width:32px;height:32px}
    .comments li li .comment-block{width:calc(100% - 40px);margin-left:auto;padding:12px 15px 15px;background-color:#f7f9f8;border-radius:15px}
    .comments li li .comment-header{height:initial;margin:0 0 10px;padding:0}
    .comments li li .comment-header .datetime{width:initial}
    .comments iframe {background: #fff;padding: 0 10px;box-sizing:border-box;border-radius: 10px}
    .comments #comment-editor {min-height: 95px;}