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.

+ komentar + 14 komentar

11 Februari 2013 pukul 21.47

keren loadingan blognya... :-d

12 Februari 2013 pukul 09.20

Lumayan kak bagi pemula seperti aku.

13 Februari 2013 pukul 00.24

wah bntuk komentarnya baru lagi..!! :D

16 Februari 2013 pukul 09.47

kira-kira bikin loading lambat gak nih? coz blogku udh berat bgt..

(aku follower 33)

16 Februari 2013 pukul 13.25

iya kak, tanpa popup seperti versi yang pertama.

16 Februari 2013 pukul 14.32

gak juga, kenyataannya di blog ini enggak tuh !

17 Februari 2013 pukul 16.54

Alhamdulillah, punyaQ udah hampir sama seperti itu...

makasih tutorialnya ya... :D

18 Februari 2013 pukul 17.33

Sama-sama kak.

21 Februari 2013 pukul 12.33

bang tolong di invite back ya

21 Februari 2013 pukul 12.34

bang tolong di invite back ya blog saya
jansenmanullang.blogspot.com

5 Maret 2013 pukul 22.55

kalu amu komentar yang di pakai blog ini ada nggak tutorialnya sob?

6 Maret 2013 pukul 10.00

Gabungkan versi pertama sama versi kedua.

Anonim
7 September 2013 pukul 03.41

v3 nya udah rilis belum yah...hhi #gutjob :)

16 April 2014 pukul 13.53

Bla... blaa.... bla...... mantap.

Posting Komentar

 
Copyright © 2011. TSC - All Rights Reserved

Distributed By Free Blogger Templates | Lyrics | Songs.pk | Download Ringtones | HD Wallpapers For Mobile

Proudly powered by Blogger