Blogger comment form layout v3 widget v2
<b:includable id='commentsContent' var='post'>
<div class='comment-thread toplevel-thread' itemprop='' itemscope='' itemtype='http://schema.org/CreativeWorkSeries'>
<span class='hidden' itemprop='name'><data:post.title/></span>
<div itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'>
<meta expr:content='data:post.numberOfComments' itemprop='ratingCount'/>
<b:if cond='data:post.numberOfComments lte 3'>
<meta content='3' itemprop='ratingValue'/>
<b:elseif cond='data:post.numberOfComments in [3,4,5]'/>
<meta content='3.5' itemprop='ratingValue'/>
<b:elseif cond='data:post.numberOfComments in [6,7,8]'/>
<meta content='4' itemprop='ratingValue'/>
<b:elseif cond='data:post.numberOfComments in [9,10,11]'/>
<meta content='4.5' itemprop='ratingValue'/>
<b:elseif cond='data:post.numberOfComments gt 11'/>
<meta content='5' itemprop='ratingValue'/>
</b:if>
<meta content='5' itemprop='bestRating'/>
<meta content='1' itemprop='worstRating'/>
</div>
<ol id='top-ra' itemprop='review' itemscope='' itemtype='http://schema.org/Review'>
<meta expr:name='data:post.title' itemprop='name'/>
<b:loop values='data:post.comments' var='firstlevel'>
<b:if cond='!data:firstlevel.inReplyTo'>
<li class='comment hidden' expr:id='"c" + data:firstlevel.id'>
<div class='avatar-image-container'>
<b:if cond='data:firstlevel.authorPhoto.url'>
<img expr:alt='data:firstlevel.author' expr:src='resizeImage(data:firstlevel.authorPhoto.url, 35, "1:1")'/>
<b:else/>
<img expr:alt='data:firstlevel.author' src='https://lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35'/>
</b:if>
<b:if cond='data:firstlevel.author == data:post.author.name'>
<span class='verified-user-icon'><svg height='15px' viewBox='0 0 24 24' width='15px'><path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z' fill='#4285F4' paint-order='stroke' stroke='#fff' stroke-width='3px'/></svg></span>
</b:if>
</div>
<div class='comment-block'>
<div class='comment-header'>
<span class='user'><a expr:href='data:firstlevel.authorUrl' expr:title='data:firstlevel.author' rel='noopener nofollow' target='_blank'><span itemprop='author'><data:firstlevel.author/></span></a></span>
<span itemprop='description'><data:firstlevel.body/></span>
</div>
<div class='comment-actions'>
<a class='comment-reply' expr:data-comment-id='data:firstlevel.id' expr:href='"#" + data:firstlevel.id' rel='nofollow' target='_self' title='Trả lời'>Trả lời</a>
<span expr:class='data:firstlevel.adminClass'><a expr:href='data:firstlevel.deleteUrl' expr:title='data:messages.deleteComment' rel='nofollow' target='_self'>Xóa</a></span>
<span class='date-time'>
<meta expr:content='data:firstlevel.timestamp' itemprop='datePublished'/>
<a expr:href='data:firstlevel.url' expr:title='data:firstlevel.timestamp' rel='nofollow' target='_self'><data:firstlevel.timestamp/></a>
</span>
</div>
</div>
<div class='comment-replies hidden'>
<div class='comment-thread secondlevel-thread' expr:id='"c" + data:firstlevel.id + "-rt"'>
<ol class='thread-chrome thread-expanded' expr:id='"c" + data:firstlevel.id + "-ra"'>
<b:loop values='data:post.comments' var='secondlevel'>
<b:if cond='data:secondlevel.inReplyTo == data:firstlevel.id'>
<li class='comment' expr:id='"c" + data:secondlevel.id'>
<div class='avatar-image-container'>
<b:if cond='data:secondlevel.authorPhoto.url'>
<img expr:alt='data:secondlevel.author' expr:src='resizeImage(data:secondlevel.authorPhoto.url, 35, "1:1")'/>
<b:else/>
<img expr:alt='data:secondlevel.author' src='https://lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35'/>
</b:if>
<b:if cond='data:secondlevel.author == data:post.author.name'>
<span class='verified-user-icon'><svg height='15px' viewBox='0 0 24 24' width='15px'><path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z' fill='#4285F4' paint-order='stroke' stroke='#fff' stroke-width='3px'/></svg></span>
</b:if>
</div>
<div class='comment-block'>
<div class='comment-header'>
<cite class='user'><a expr:href='data:secondlevel.authorUrl' expr:title='data:secondlevel.author' rel='noopener nofollow' target='_blank'><data:secondlevel.author/></a></cite>
<span><data:secondlevel.body/></span>
</div>
<div class='comment-actions'>
<a class='comment-reply' expr:data-comment-id='data:secondlevel.id' expr:href='"#" + data:secondlevel.id' rel='nofollow' target='_self' title='Trả lời'>Trả lời</a>
<span expr:class='data:secondlevel.adminClass'><a expr:href='data:secondlevel.deleteUrl' expr:title='data:messages.deleteComment' rel='nofollow' target='_self'>Xóa</a></span>
<span class='date-time'><a expr:href='data:secondlevel.url' expr:title='data:secondlevel.timestamp' rel='nofollow' target='_self'><data:secondlevel.timestamp/></a></span>
</div>
</div>
<div class='comment-replies'>
<div class='comment-thread thirdlevel-thread' expr:id='"c" + data:secondlevel.id + "-rt"'>
<ol class='thread-chrome thread-expanded' expr:id='"c" + data:secondlevel.id + "-ra"'>
<b:loop values='data:post.comments' var='thirdlevel'>
<b:if cond='data:thirdlevel.inReplyTo == data:secondlevel.id'>
<li class='comment' expr:id='"c" + data:thirdlevel.id'>
<div class='avatar-image-container'>
<b:if cond='data:thirdlevel.authorPhoto.url'>
<img expr:alt='data:thirdlevel.author' expr:src='resizeImage(data:thirdlevel.authorPhoto.url, 35, "1:1")'/>
<b:else/>
<img expr:alt='data:thirdlevel.author' src='https://lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SA=s35'/>
</b:if>
<b:if cond='data:thirdlevel.author == data:post.author.name'>
<span class='verified-user-icon'><svg height='15px' viewBox='0 0 24 24' width='15px'><path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z' fill='#4285F4' paint-order='stroke' stroke='#fff' stroke-width='3px'/></svg></span>
</b:if>
</div>
<div class='comment-block'>
<div class='comment-header'>
<cite class='user'><a expr:href='data:thirdlevel.authorUrl' expr:title='data:thirdlevel.author' rel='noopener nofollow' target='_blank'><data:thirdlevel.author/></a></cite>
<span><data:thirdlevel.body/></span>
</div>
<div class='comment-actions'>
<span expr:class='data:thirdlevel.adminClass'><a expr:href='data:thirdlevel.deleteUrl' expr:title='data:messages.deleteComment' rel='nofollow' target='_self'>Xóa</a></span>
<span class='date-time'><a expr:href='data:thirdlevel.url' expr:title='data:thirdlevel.timestamp' rel='nofollow' target='_self'><data:thirdlevel.timestamp/></a></span>
</div>
</div>
</li>
</b:if>
</b:loop>
</ol>
</div>
</div>
<div class='comment-replybox-single' expr:id='"c" + data:secondlevel.id + "-ce"'/>
</li>
</b:if>
</b:loop>
</ol>
</div>
</div>
<div class='comment-replybox-single' expr:id='"c" + data:firstlevel.id + "-ce"'/>
<div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'>
<meta content='1' itemprop='worstRating'/>
<meta content='4' itemprop='ratingValue'/>
<meta content='5' itemprop='bestRating'/>
</div>
</li>
</b:if>
</b:loop>
</ol>
<div class='loadmore hidden' expr:data-post-id='data:post.id'><a expr:title='data:messages.showMore' href='#loadmore' rel='nofollow' role='button' target='_self'><data:messages.showMore/></a></div>
<div class='showless hidden'><a href='#showless' rel='nofollow' role='button' target='_self' title='Thu gọn'>Thu gọn</a></div>
</div>
</b:includable>
<b:includable id='commentForm' var='post'>
<b:include name='commentsTitle'/>
<div class='comment-form'>
<b:include data='post' name='commentFormIframeSrc'/>
<div class='commentForm spinner hidden'/>
</div>
</b:includable>
<b:includable id='comments' var='post'>
<div expr:class='"comments" + (data:post.embedCommentForm ? " embed" : "")' expr:data-allow-comments='data:post.allowNewComments ? "true" : "false"' expr:data-embed='data:post.embedCommentForm ? "true" : "false"' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='commentForm'/>
<b:else/>
<div class='thread-locked-alert'>
<svg height='24px' viewBox='0 0 24 24' width='24px'><path d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>
<font> <data:post.noNewCommentsText/></font>
</div>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='addComments'/>
</b:if>
</b:if>
<b:else/>
<div class='thread-locked-alert'>
<svg height='24px' viewBox='0 0 24 24' width='24px'><path d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>
<font> Nhận xét đã bị vô hiệu hóa.</font>
</div>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe id='comment-actions' name='comment-actions' scrolling='no' title='comment actions'/>
</div>
</b:if>
</div>
</b:includable>
<b:includable id='threadedCommentForm' var='post'>
<b:include name='commentsTitle'/>
<div class='comment-form'>
<b:include data='post' name='commentFormIframeSrc'/>
<div class='commentForm spinner hidden'/>
</div>
</b:includable>
<b:includable id='threadedComments' var='post'>
<div expr:class='"comments threaded" + (data:post.embedCommentForm ? " embed" : "")' expr:data-allow-comments='data:post.allowNewComments ? "true" : "false"' expr:data-embed='data:post.embedCommentForm ? "true" : "false"' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threadedCommentForm'/>
<b:else/>
<div class='thread-locked-alert'>
<svg viewBox='0 0 24 24'><path d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>
<font> <data:post.noNewCommentsText/></font>
</div>
</b:if>
<div class='comments-content'>
<div id='comment-holder'>
<b:include data='post' name='commentsContent'/>
</div>
</div>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='allowtransparency' id='comment-actions' name='comment-actions' scrolling='no' title='comment actions'/>
</div>
</b:if>
</div>
</b:includable>
Chèn trước </body>
<!-- Thay data:view.isSingleItem thành data:view.isPost nếu chỉ hiển thị trong post -->
<b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:view.isSingleItem'>
<script>//<![CDATA[
$(window).bind('load',function(){
var data_embed=$('#comments').attr('data-embed'),
data_allow_comments=$('#comments').attr('data-allow-comments')
if(data_embed=='true'&&data_allow_comments=='true'){
$('.commentForm').removeClass('hidden')
$('.commentForm').append('<iframe class="blogger-iframe-colorize blogger-comment-from-post" id="comment-editor" name="comment-editor" src="" title="comment iframe"></iframe>')
$.getScript('https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js').done(function(){
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html')
$('.commentForm').removeClass('spinner')
})
var url=window.location.href,l='',id='',li=''
$('.comment a.comment-reply').click(function(e){
l=$('#comment-editor').attr('src')
$('.calcel-reply').remove()
$('.comment-actions').removeAttr('style')
var $this=$(this),
id=$this.attr('data-comment-id')
l=l+'&parentID='+id
li=$this.parent().parent().parent().attr('id')
$('#comment-editor').attr('src',l)
$this.parent().hide()
$('.commentForm').appendTo($('#'+li+'>.comment-replybox-single'))
$('html,body').stop().animate({scrollTop:($('.commentForm').offset().top)-100},'slow')
$('#'+li+'>.comment-replybox-single').append('<div class="calcel-reply"><button class="theme-button blue" type="button">Hủy</button></div>')
$('.calcel-reply').click(function(){
$(this).remove()
$('.comment-actions').removeAttr('style')
$('.commentForm').appendTo($('.comment-form'))
$('html,body').stop().animate({scrollTop:($('.commentForm').offset().top)-100},'slow')
})
})
$('.toplevel-thread>ol>li>.comment-replies').each(function(){
if($(this).find('.comment-thread>ol>li').length>0){
$(this).before('<div class="view-replies"><span>Xem '+$(this).find('.comment-thread>ol>li').length+' câu trả lời</span></div>')
}
$('.comment .view-replies>span').click(function(){
$(this).parent().hide()
$(this).parent().next().removeClass('hidden')
})
})
var str=$('.toplevel-thread>ol>li'),m=10,n=str.length,k=0,p=0
if(url.indexOf('?showComment')!=-1){
if(url.indexOf('#c')!=-1){
var li='#'+url.substring(url.indexOf('#c')+1,url.length)
if($(li).parents('.comment-thread').hasClass('thirdlevel-thread')){
k=$(li).parents('li').parents('li').index()
}else if($(li).parents('.comment-thread').hasClass('secondlevel-thread')){
k=$(li).parents('li').index()
}else{k=$(li).index()}
if(k>m){
for(var i=0;i<k+1;i++){$(str[i]).removeClass('hidden')}
}else{for(var i=0;i<m;i++){$(str[i]).removeClass('hidden')}}
if(k<n){$('#comments .loadmore').removeClass('hidden')}
$(li).parents('li').find('.view-replies').hide()
$(li).parents('.comment-replies').removeClass('hidden')
$('html,body').stop().animate({scrollTop:($(li).offset().top)-100},'slow')
}else{
for(var i=0;i<m;i++){$(str[i]).removeClass('hidden')}
if(n>m){$('#comments .loadmore').removeClass('hidden')}
}
}else{
for(var i=0;i<m;i++){$(str[i]).removeClass('hidden')}
if(n>m){$('#comments .loadmore').removeClass('hidden')}
}
$('#comments .loadmore>a').click(function(){
p=$('.toplevel-thread>ol>li.comment.hidden').length
k=n-p
if(p==0){
$(this).parent().addClass('hidden')
$('#comments .showless').removeClass('hidden')
}else{
for(var i=k;i<k+m;i++){
$(str[i]).removeClass('hidden')
}
}
})
$('#comments .showless>a').click(function(){
n=str.length
for(var i=m;i<n;i++){
$(str[i]).addClass('hidden')
}
$(this).parent().addClass('hidden')
$('#comments .loadmore').removeClass('hidden')
$('html,body').stop().animate({scrollTop:($('.commentForm').offset().top)-100},'slow')
})
if(url.indexOf('#comments')!=-1){
$('html,body').stop().animate({scrollTop:($('.commentForm').offset().top)-100},'slow')
}
}
})
//]]></script>
</b:if>
Public Last updated: 2019-12-31 02:18:08 AM