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

Hướng Dẫn Tạo Khung Hiển Thị Nội Dung Comment 2 Cấp Đẹp Cho Blogger Bởi QuangSangit.Com



Cách thực hiện

Đăng nhập vào trang quản trị Blogger, vào Chủ đề -> Chỉnh sửa HTML


Đầ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,") 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;}