Khung Hiển Thị Nội Dung Comment 2 Cấp Đẹp Cho Blogger
October 06, 2020
7
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
- <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>
<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> <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: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ẻ
/* 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;}-----------------------------------
