edisini
Dalam membuat template blogger sccript komentar terpecah menjadi banyak includable dan itu sering membuat bingung bagi pembuat template pemula seperti kami, lalu dengan tidak sengja kami menemukan code komentar blogger yang termarkup dalam satu includable saja, dan itu sangat memudahkan untuk dibaca dan dipelajari.
Includable CommentPost
Dari sekian banyak code bagian includable komentar dikumpulkan dalam satu markup, kita bisa mengubah class sesuka hati. Penempatannya dalam cakupan widget blog1.
<b:includable id="commentPost">
<div id="commentPost" class="posComment">
<div class="com-header">
<strong class="com-jumlah">
<b:if cond='data:post.numberOfComments > 0'>
<b:message name='messages.numberOfComments'>
<b:param expr:value='data:post.numberOfComments' name='numComments' />
</b:message>
<b:else />
<data:this.allBylineItems.comments.label />
</b:if>
</strong>
<button id="addNewcomment" data-id='addNewComment' class="com-add commentActionButton d-none">
<data:messages.postAComment />
</button>
</div>
<b:comment>
this Comment Location setting (Embed, Full, Or Popup)
</b:comment>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.noNewCommentsText'>
<b:comment>new comment has disable from post setting (only work embed comment)</b:comment>
<div class='alert alert-warning my-3'>
<data:post.noNewCommentsText />
</div>
<b:else />
<b:comment>commentPostEmbed</b:comment>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' />
<div id="commentFormWrapper">
<div id="commentForm">
<b:if cond='data:this.messages.blogComment'>
<div class='com-pesan'>
<data:this.messages.blogComment />
</div>
</b:if>
<b:comment>don't remove class name or the comment can't work</b:comment>
<iframe loading="lazy" allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:data-src='data:post.commentFormIframeSrc' scrolling='no' frameborder='0' id='comment-editor' name='comment-editor' width='100%' />
</div>
</div>
</b:if>
<b:elseif cond='data:post.commentsUrl' />
<b:if cond='data:post.commentsUrlOnclick'>
<b:comment>commentPostPopup</b:comment>
<a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
<b:message name='messages.postAComment' />
</a>
<b:else />
<b:comment>commentPostFullPage</b:comment>
<a expr:href='data:post.commentsUrl'>
<b:message name='messages.postAComment' />
</a>
</b:if>
</b:if>
<b:comment>this Comment Data</b:comment>
<b:if cond='data:post.numberOfComments > 0'>
<ul class="list-group">
<b:loop values='data:post.comments where (comment => not comment.inReplyTo or comment.inReplyTo == 0)' var='comment' reverse="true">
<li class="list-group-item com-utama" expr:id='data:comment.anchorName'>
<div class="CommentLeft">
<b:if cond='data:comment.authorAvatarSrc != "//resources.blogblog.com/img/blank.gif"'>
<img class="rounded-circle" expr:src='data:comment.authorAvatarSrc ? resizeImage(data:comment.authorAvatarSrc, 35) : "https://www.blogger.com/img/blogger_logo_round_35.png"' expr:alt="data:comment.author" width="35" height="35" />
<b:else />
<img class="rounded-circle" src='https://www.blogger.com/img/blogger_logo_round_35.png' expr:alt="data:comment.author" width="35" height="35" />
</b:if>
</div>
<div class="commentRight w-100">
<div class="commentHeader com-profil">
<strong class="com-user-profil">
<data:comment.author />
<b:if cond='data:post.adminClass == data:comment.adminClass'>
<i class="bi bi-shield-check text-success"></i>
</b:if>
</strong>
<span class="small">
<data:comment.timestamp />
</span>
</div>
<div class="commentBody">
<p class="link-com-disabled">
<b:class cond='data:comment.isDeleted' name='text-danger' />
<b:comment>only admin can insert link to comment</b:comment>
<b:if cond='data:post.adminClass == data:commentReply.adminClass'>
<data:comment.body />
<b:else />
<b:eval expr='data:comment.body snippet { links: false }' />
</b:if>
</p>
<b:with value='data:post.comments where (commentReply => commentReply.inReplyTo == data:comment.id)' var='commentReply'>
<b:if cond='data:commentReply.size > 0'>
<ul class="list-group">
<b:loop values='data:commentReply' var='commentReply'>
<li class="list-group-item com-balasan" expr:id='data:commentReply.anchorName'>
<div class="CommentLeft">
<b:if cond='data:commentReply.authorAvatarSrc != "//resources.blogblog.com/img/blank.gif"'>
<img class="rounded-circle" expr:src='data:commentReply.authorAvatarSrc ? resizeImage(data:commentReply.authorAvatarSrc, 35) : "https://www.blogger.com/img/blogger_logo_round_35.png"' expr:alt="data:commentReply.author" width="35" height="35" />
<b:else />
<img class="rounded-circle" src='https://www.blogger.com/img/blogger_logo_round_35.png' expr:alt="data:comment.author" width="35" height="35" />
</b:if>
</div>
<div class="commentRight w-100">
<div class="commentHeader com-profil">
<strong class="com-user-profil">
<data:commentReply.author />
<b:if cond='data:post.adminClass == data:commentReply.adminClass'>
<i class="bi bi-shield-check text-success"></i>
</b:if>
</strong>
<span class="small">
<data:commentReply.timestamp />
</span>
</div>
<div class="commentBody">
<p class="link-com-disabled">
<b:class cond='data:commentReply.isDeleted' name='text-danger' />
<b:if cond='data:post.adminClass == data:commentReply.adminClass'>
<data:commentReply.body />
<b:else />
<b:eval expr='data:commentReply.body snippet { links: false }' />
</b:if>
</p>
</div>
</div>
</li>
</b:loop>
</ul>
</b:if>
</b:with>
<b:comment>remove reply button if comment size is 200 (its bug from blogger if you add reply comment then people go reply, the comment can't be show :(</b:comment>
<b:if cond='data:post.comments.size lt 200'>
<b:if cond='data:post.allowNewComments'>
<b:comment>this for reply button</b:comment>
<button expr:data-id='data:comment.id' class="border-0 p-0 commentActionButton">
<i class='bi bi-reply'></i>
<b:switch var='data:blog.locale'>
<b:case value='id' />
Balas
<b:default />
Reply
</b:switch>
</button>
</b:if>
</b:if>
<b:comment>this for reply formComment</b:comment>
<div expr:id='"form-container-" + data:comment.id' />
</div>
</div>
</li>
</b:loop>
</ul>
</b:if>
<b:comment>show paging if have 200+ comment</b:comment>
<b:if cond='data:post.commentPagingRequired'>
<div class='c-flex'>
<span>
<data:post.commentRangeText />
<data:messages.comments />
</span>
<b:if cond='data:post.hasOlderLinks'>
<a class='text-decoration-none' expr:href='data:post.oldestLinkUrl fragment "commentPost"'>
<data:messages.oldest />
<data:messages.comments />
</a>
</b:if>
<b:if cond='data:post.hasNewerLinks'>
<a class='text-decoration-none' expr:href='data:post.newerLinkUrl fragment "commentPost"'>
<data:messages.newer />
<data:messages.comments />
</a>
</b:if>
</div>
</b:if>
</div>
</b:includable>Javascript Komentar
Kode diatas membutuhkan javascript bawaan blogger kita bisa menggantinya dengan javascript dibawah ini.
Letakkan kode javascript sebelum kode </body>
<script type='text/javascript'>//<![CDATA[
/* load after scroll on post-detail */
let postDetail = $(".post-detail"), postDetailHasLoaded = 0;
if (postDetail.length > 0) {
$(window).on("load scroll", function() {
var height = postDetail.outerHeight();
if (($(window).scrollTop() + $(window).height()) >= height && !postDetailHasLoaded) {
/* set postDetailHasLoaded */
postDetailHasLoaded = 1;
/* load commentPost */
postComment();
}
});
}
function postComment() {
/* check if have comment-editor element */
if ($("#comment-editor").length > 0) {
/* load commentPost */
$.getScript("https://www.blogger.com/static/v1/jsbin/3262169375-comment_from_post_iframe.js", function(data, textStatus, jqxhr) {
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
/* reply button */
let iframeSrc = $("#comment-editor").data('src').split('#');
$(".commentActionButton").on("click", function() {
/* get form data */
let form = $("#commentForm"),
/* get id from this button */
id = $(this).data('id');
/* build iframe from current data */
let frame = $("#comment-editor"),
container = (id != "addNewComment") ? $('#form-container-' + id) : $("#commentFormWrapper");
frame.attr('src', (id != "addNewComment") ? iframeSrc[0] + '&parentID=' + id + '#' + iframeSrc[1] : iframeSrc[0] + '#' + iframeSrc[1]);
/* toggle addNewComment */
if (id != "addNewComment") {
$("#addNewcomment").removeClass('d-none');
} else {
$("#addNewcomment").addClass('d-none');
}
/* send iframe */
container.html(form);
})
});
}
}
//]]></script>Include CommentPost
Untuk menampilkan includable diatas taruh kode berikut dibawah <data:post.body/>
<b:if cond='data:view.isSingleItem'>
<b:include cond='data:post.allowComments' name='commentPost'/>
</b:if>Css Komentar
untuk mempercantik tampilan komentar tambahkan CSS berikut atau Anda bisa ubah sesuai selera
#commentPost{position:relative;margin-top:1.5em;display:flex;flex-direction:column;gap:1em}
.com-header{display:flex;align-items:center;padding-bottom:1em;border-bottom:1px solid #eee}
strong.com-jumlah{display:flex;align-items:center;gap:.5em}
span.icon-komentar{display:inherit}
div#commentFormWrapper{border:1px solid #eee;border-radius:.5em}
ul.list-group{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:1em}
.list-group-item{display:flex;gap:.5em;position:relative}
.com-utama{border:1px solid #eee;border-radius:.5em;padding:10px}
.CommentLeft img{border-radius:50%;}
.commentRight.w-100{width:100%}
.commentHeader{display:inline-flex;align-items:center;background:#f9f9f9;padding:.3em;border-radius:.3em;gap:1em}
strong.com-user-profil{display:flex;align-items:center;gap:.5em}
span.com-admin-icon{display:inherit}
span.com-admin-icon svg{fill:darkorange}
#commentPost span.small{color:darkgray;font-size:90%}
button.com-reply{display:flex;gap:.3em;font-size:90%;align-items:center;background:transparent;border:1px solid #eee;border-radius:.3em}
button.com-reply:hover{background:darkorange;color:#fff;border-color:darkorange}
button.com-reply:hover > button.com-reply svg{fill:#fff}
.com-add{margin-left:auto;border:none;background:rgba(0,0,0,.54);color:#fff;border-radius:.3em;padding:.3em .5em}
.com-add:hover{background:darkorange}Simpan template dan lihat hasilnya, sesuaikan dengan kode template blog Anda
Komentar
Posting Komentar