hí xin chào mọi người nha thì nay mình xin chia sẽ cho mọi người một cái tips blogger khá là hay đó là chúng ta sẽ tạo ra khung comment cấp 2 cho blogger nhá.
 |
| Khung Hiển Thị Nội Dung Comment 2 Cấp Đẹp Cho Blogger |
okiii bắt đầu thôi.
đầu tiên thì mọi người cần vào trang quản trị của blogger --> chủ đề --> chỉnh sửa HTML
sao khi vào rồi thì mọi người tiếp tục xóa hết máy cái 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 thì các bạn hãy thêm inclidable mới vào bên 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>
tiếp tục các bạn hãy thêm 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>
tiếp đến thì các bạn tìm đến thẻ <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'/>
các bạn hãy nhớ là xóa thẻ gọi commentPiker đi ak nha.
bây h thì các bạn hãy thêm css cho nó. các bạn hãy tìm thẻ ]]></b:skin> hoặc bạn có thẻ nhát vào bên trong cặp 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;}
okkii thì đó là toàn bộ nội dung để tạo một khung comment cấp 2 đó nha, nếu có thắc mắc gì thì mọi người hãy comment bên dưới mình sẽ giải đáp cho nhé. chúc các bạn thành công nhe.
Design by @KiMiDev
có DEMO không anh
Như trong hình nhé
Can you post more stylish commenting systems? Please
okay, I'll write a new post and make it easier to understand
Có Video Hướng Dẫn Ko Nhỉ
dạ hiện tại code này sẽ ko còn áp dụng đc nữa nha bạn. hiện tại các theme hiện nay hỗ trợ nhiều code khác nhau nên cấu trúc code sẽ không giống nhau. bạn có thể thử lại với nhiều code khác ạ