Membuat Komentar Blogger Seperti Wordpress V2

Membuat Komentar Blogger Seperti Wordpress V2

Membuat Komentar Blogger Seperti Wordpress V2

Pada postingan terdahulu, saya membuat tutorial tentang Cara membuat komentar blog bertingkat seperti WordPress. Akan tetapi banyak komentar yang menyatakan bagaimana membuat komentar tersebut tanpa "pop up". Beberapa kelebihan yang terdapat pada V.2 ini antara lain Tanpa Pop up, Installasi lebih mudah.

Installasi Komentar Blogger Seperti Wordpress V2 :

Sebelum melakukan installasi astikan Backup dulu template, untuk menghindari error pada installasi.

1. Buka editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:

]]></b:skin>

2. Salin kode CSS ini dan letakkan di atasnya:

.clearfix:after {
content:"";
display:table;
clear:both;
}

.clearfix {*zoom:1}

.pull-left {
display:block;
float:left;
}

.pull-right {
display:block;
float:right;
}

/* Start Custom Comments' CSS */
.custom-comments {
margin:3em 0 0;
font:normal normal 13px/1.4 Tahoma,Arial,Sans-Serif;
letter-spacing:0;
}

/* links */
.custom-comments a,
.custom-comments a:visited {
color:#2143B4;
text-decoration:none;
}

.custom-comments a:hover {text-decoration:underline}

/* comment item */
.custom-comments .comment-item {
margin:0 0 1em;
padding:0 0 .7em 0;
border-bottom:1px solid #eee;
position:relative;
}

/* comment header */
.custom-comments .comment-header {
overflow:hidden;
margin:0 0 1em 0;
}

/* avatar area */
.custom-comments .avatar-box {
width:65px;
margin:0 0 20px 0;
}

/* avatar */
.custom-comments .avatar-image-container,
.custom-comments .avatar-image-container a,
.custom-comments .avatar-image-container img {
border:none;
padding:0 0;
margin:0 0;
float:none;
display:block;
width:50px;
height:50px;
max-width:none;
max-height:none;
}

.custom-comments .avatar-image-container img {
border:1px solid #ddd;
padding:4px;
background-color:#fafafa;
}

/* comment body */
.custom-comments .comment-body {margin:0 0 2em 75px}

/* comment reply */
.custom-comments .comment-reply {
margin:1em 0 0 75px;
padding:1em 1.2em;
background-color:#FFF7D1;
position:relative;
font-size:11px;
}

.custom-comments .comment-reply:after {
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
left:0;
border:10px solid transparent;
border-color:white #F5F2D8 #F5F2D8 white;
}

.custom-comments .comment-reply .user {margin-left:15px}
.custom-comments .comment-reply a {color:#767643}

.custom-comments .comment-reply .avatar-image-container img {
border-color:#EAE5C4;
background-color:#F5F0D3;
}

/* comment item footer */
.custom-comments .comment-bottom-line {
display:block;
clear:both;
margin:1em 0 .5em 75px;
text-align:right;
}

/* comment buttons */
.custom-comments .comment-bottom-line a,
.custom-comments .cancel-reply-btn {
border:1px solid #ddd;
outline:none;
padding:2px .7em 3px .5em;
margin:0 0 0 4px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
text-decoration:none;
}

.custom-comments .comment-reply .comment-bottom-line a,
.custom-comments .cancel-reply-btn {border-color:#EAE5C4}
.custom-comments .comment-bottom-line a:before {content:attr(data-icon) " "}
.custom-comments .comment-bottom-line .reply-btn:before {color:#3DB537}
.custom-comments .comment-bottom-line .delete-btn:before {color:#B42A21}

.custom-comments .comment-bottom-line a:hover,
.custom-comments .cancel-reply-btn:hover {
border-color:#bbb;
text-decoration:none;
}

.custom-comments .comment-bottom-line a:active,
.custom-comments .comment-bottom-line a:focus,
.custom-comments .cancel-reply-btn:active,
.custom-comments .cancel-reply-btn:focus {border-color:#999}
.custom-comments .cancel-reply-btn {padding:3px 1em 4px}

/* comment form */
.custom-comments .custom-comment-form {
margin:1em 0 2em;
clear:both;
}

.custom-comments .comment-item .custom-comment-form {
border:1px solid #eee;
padding:1em .2em 2em 1.5em;
margin-left:75px;
}

.custom-comments #comment-editor {
max-width:none;
width:100%;
height:250px;
border:none;
background:none;
}

.custom-comments .custom-comment-form .cancel-reply-btn {display:none}
.custom-comments .comment-item .custom-comment-form .cancel-reply-btn {display:inline}
.custom-comments .comment-item .custom-comment-form h4 {display:none}

/* loading animation */
.custom-comments .custom-comment-editor-wrapper {background:transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%}

/* deleted comment */
.custom-comments .deleted-comment {
font-style:italic;
color:#aaa;
}

/* comments paging control */
.custom-comments .paging-control-container {
font-size:100%;
display:block;
float:none;
width:auto;
clear:both;
border:1px solid #eee;
padding:.5em 1em;
overflow:hidden;
}

/* Author Comments Style: Do whatever you want with this! */
.author-comment > .comment-item {}
.author-comment > .comment-reply {}

3. Kemudian cari kode ini:

<b:includable id='comments' var='post'>
---------
---------
</b:includable>

4. Hapus kode tersebut dan ganti dengan kode berikut ini :

<b:includable id='custom-comments' var='post'>
<section class='custom-comments' id='custom-comments'>
<b:if cond='data:post.allowComments'>

<h4>
<b:if cond='data:post.numComments == 1'>
<span>1</span>&amp;nbsp;<data:commentLabel/>
<b:else/>
<span><data:post.numComments/></span>&amp;nbsp;<data:commentLabelPlural/>
</b:if>
</h4>

<b:if cond='data:post.commentPagingRequired'>
<nav class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;
<data:post.commentRangeText/>&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</nav>
</b:if>

<div id='comments-area'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.inReplyTo'><b:else/>
<b:if cond='data:comment.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
<div class='comment-item clearfix' expr:id='data:comment.anchorName'>
<div class='comment-header clearfix'>
<strong class='user pull-left'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if> <data:commentPostedByMsg/>
</strong>
<a class='comment-permalink pull-right' expr:href='data:comment.url' title='Comment Permalink'><data:comment.timestamp/></a>
</div> <!-- comment-header -->
<div class='avatar-box pull-left'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div> <!-- avatar-box -->
<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<data:comment.body/>
</b:if>
</div> <!-- comment-body -->
<b:loop values='data:post.comments' var='replies'>
<b:if cond='data:replies.inReplyTo == data:comment.id'>
<b:if cond='data:replies.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
<div class='comment-reply clearfix' expr:id='data:replies.anchorName'>
<div class='comment-header clearfix'>
<strong class='user pull-left'>
<b:if cond='data:replies.authorUrl'>
<a expr:href='data:replies.authorUrl' rel='nofollow'><data:replies.author/></a>
<b:else/>
<data:replies.author/>
</b:if> <data:commentPostedByMsg/>
</strong>
<a class='comment-permalink pull-right' expr:href='data:replies.url' title='Comment Permalink'><data:replies.timestamp/></a>
</div> <!-- reply comment-header -->
<div class='avatar-box pull-left'>
<b:if cond='data:replies.favicon'>
<img expr:src='data:replies.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:replies.authorAvatarImage/>
</b:if>
</div> <!-- reply avatar-box -->
<div class='comment-body'>
<b:if cond='data:replies.isDeleted'>
<span class='deleted-comment'><data:replies.body/></span>
<b:else/>
<data:replies.body/>
</b:if>
</div> <!-- reply comment-body -->
<span class='comment-bottom-line'>
&lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:replies.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Delete&lt;/a&gt;
</span>
</div> <!-- reply comment-reply -->
<b:if cond='data:replies.author == data:post.author'>&lt;/div&gt;</b:if>
</b:if> <!-- replies.inReplyTo -->
</b:loop>
<span class='comment-bottom-line'>
<b:if cond='data:comment.isDeleted != &quot;true&quot;'>&lt;a class=&#39;reply-btn&#39; data-icon=&#39;&amp;dArr;&#39; href=&#39;javascript:replyTo(&quot;<data:comment.id/>&quot;);&#39;&gt;Reply&lt;/a&gt;</b:if>&lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:comment.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Delete&lt;/a&gt;
</span>
<div expr:id='&quot;form-container-&quot; + data:comment.id'/>
</div> <!-- comment-item -->
<b:if cond='data:comment.author == data:post.author'>&lt;/div&gt;</b:if>
</b:if> <!-- comment.inReplyTo -->
</b:loop>
</div>

<b:if cond='data:post.commentPagingRequired'>
<nav class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;
<data:post.commentRangeText/>&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</nav>
</b:if>

<div class='custom-comment-form' id='custom-comment-form'>
<h4><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<div class='custom-comment-editor-wrapper'>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src=''/>
</div>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);</script>
<a class='cancel-reply-btn' href='javascript:replyTo(&quot;cancel&quot;);'>Cancel Reply</a>
</div>

<script type='text/javascript'>
//<![CDATA[
var originalSource = document.getElementById('comment-editor').src.split('#');
function replyTo(id) {
var frame = document.getElementById('comment-editor'),
form = document.getElementById('custom-comment-form'),
container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'),
part = originalSource;
frame.style.height = "50px";
frame.style.visibility = "hidden";
frame.src = (id != "cancel") ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1];
container.insertBefore(form, null);
frame.onload = function() {
this.style.height = "250px";
this.style.visibility = "visible";
};
}
//]]>
</script>

</b:if>
</section>
</b:includable>

5. Cari semua kode yang tampak seperti ini :

<b:include data='post' name='threaded_comments'/>

Atau :

<b:include data='post' name='comments'/>

6. ganti dengan kode ini :

<b:include data='post' name='custom-comments'/>

7. Terakhir Simpan Template dan lihat hasilnya.