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 > 0'>
<div class='comments-content'>
<ol id='comment-holder'>
<b:loop values='data:post.comments where (c => not c.inReplyTo)' var='commentLevel1'>
<li class='comment' expr:id='"c" + 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 => c.inReplyTo == data:commentLevel1.id)' var='commentL2'>
<b:if cond='data:commentL2.size != "0"'>
<div class='comment-replies'>
<input class='thread-show hidden' expr:id='"off-" + data:commentLevel1.id' type='checkbox'/>
<div class='comment-thread inline-thread' expr:id='"c" + data:commentLevel1.id + "-rt"'>
<label class='thread-toggle thread-expanded' expr:for='"off-" + 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='"c" + 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 != "2" 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 != ""'>
<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: "contempo"}' expr:src='data:post.commentFormIframeSrc appendParams {skin: "contempo"}' 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 != "//resources.blogblog.com/img/blank.gif"'>
<img class='post-thumb lazy' expr:alt='data:cb.level.author' expr:data-src='resizeImage(data:cb.level.authorAvatarSrc, 100, "1:1")' 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 != "Anonymous"'>
<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='"#c" + 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 != "2"'>
<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='"item-control " + 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>
Thêm CSS dưới đây vào trong thẻ
/* 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;}