Post Game: Cara Membuat Reply Comment Pada Blogger Seperti WordPress Part 2

Thursday, November 17, 2016

Cara Membuat Reply Comment Pada Blogger Seperti WordPress Part 2

Pada postingan sebelunya saya pernah posting tentang Cara Membuat Reply Comment Pada Blogger Seperti WordPress, pada postingan tersebut saya tidak pikir panjang pada saat membuat judul blog yang tidak nyambung dengan isi postingan tersebut, karena takut mengecewakan para pembaca jadi disini saya akan posting tentang Cara Membuat Reply Comment Pada Blogger Seperti WordPress Part 2, di sesi kedua ini isinya lebih nyambung dari pada yang sebelumnya, danjuga bagi yang penasaran dengan tampilan komentar di blog saya yang unyu unyu ini ;)

Pada postingan kali ini saya tidak akan banyak bacot jadi kalo yang ingin membuat tampilan komentar seperti pada blog saya silahkan ikuti tata cara berikut:

1. Masuk ke Blogger.
2. Masuk ke Template > Edit HTML > Lanjutkan. { inget slogan pak SBY}
3. Lalu Centang "Expand Widget Templates"
4. Cari kode ]]></b:skin> {gunakan Ctrl + F}
5. Setelah ketemu sekarang simpan kode berikut di atasnya.

#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
border-radius: 20px 20px 20px 20px;
}
.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {
padding: 16px 16px 0 16px;
background: #F7F7F7;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
}
.cm_entry_a {
padding: 16px 16px 0 16px;background: #F7F7F7;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhObByCyBbI-oUcz1bPOb23WMPz2XVl9BkGjXb4q8Dgmgn_SUj-GBMfQpN0PDi8gNZlcOadUA_JR1YXoYE-_D-aFLvqWrfAHae-4OUEsVqQis6hlUlxZEMsBBZ1QWDeDBOdbCT_e6QZ65w/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
background-color: #F4F4F4;
padding: 5px;

}
.cm_info_a {
margin-bottom: 5px;
padding: 5px;
border-radius: 20px 20px 20px 20px;
}

.cm_name {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;
}
.cm_name_a {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
margin-bottom: 10px;
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #fff;
font-size: 13px;
color: #333;
word-wrap:break-word;
border-radius: 0px 20px 20px 20px;
}
.cm_entry_a p {
margin-bottom: 10px;
background: url("http://congdongit.com.vn/images/misc/admin.gif") no-repeat right;
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #fff;
font-size: 13px;
color: #333;
word-wrap:break-word;
border-radius: 0px 20px 20px 20px;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

6. Setelah itu cari kode </body>
7. Setelah ketemu letakan kode berikut di atasnya

<script type="text/javascript"></script>

8. Lalu cari kode <b:includable id=comments var=post> , lalu lihat

<b:includable id=comments var=post>
kode yang harus di ganti
</b:includable>

Jadi di antara <b:includable id=comments var=post> dan </b:includable> ada sebuah kode yang munkin panjang dan kode tersebut harus di ganti dengan kode berikut

<div class=comments id=comments>
<a name=comments/>
<b:if cond=data:post.allowComments>
<h4>
<b:if cond=data:post.numComments > 0>
<b:if cond=data:post.numComments == 1>
<span id=cm_total>1</span> comment
<b:else/>
<span id=cm_total><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>

<div id=cm_reply_css/>

<div class=cm_pagenavi id=cm_page/>

<div id=cm_block>
<b:loop values=data:post.comments var=comment>
<b:if cond=data:comment.isDeleted>
<b:else/>

<div expr_id=data:comment.anchorName>
<div class=cm_wrap>
<a expr_name=data:comment.anchorName/>
<b:if cond=data:comment.author == data:post.author>
<div class=cm_head>
<div class=cm_avatar_a>
<b:if cond=data:blog.enabledCommentProfileImages>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class=cm_reply>
<a expr_href="https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form" onclick=javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;>Reply</a>
</div>
</div>
<b:else/>
<div class=cm_head>
<div class=cm_avatar>
<b:if cond=data:blog.enabledCommentProfileImages>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class=cm_reply>
<a expr_href="https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form" onclick=javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;>Reply</a>
</div>
</div>
</b:if>
<b:if cond=data:comment.author == data:post.author>
<div class=cm_entry_a>
<span class=cm_arrow/>
<div class=cm_info_a>
<div class=cm_name_a>
<b:if cond=data:comment.author == data:post.author>
<a expr_href=data:comment.authorUrl rel=nofollow target=_blank>
<data:comment.author/>
</a>
<b:else/>
<b:if cond=data:comment.authorUrl>
<a expr_href=data:comment.authorUrl rel=nofollow target=_blank>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</b:if>
</div>
<b:if cond=data:comment.author == data:post.author>
<div class=cm_date_a>
<data:comment.timestamp/>
<b:include data=comment name=commentDeleteIcon/>
</div>
<div class=clear/>
<b:else/>
<div class=cm_date>
<data:comment.timestamp/>
<b:include data=comment name=commentDeleteIcon/>
</div>
<div class=clear/>
</b:if>
</div>
<b:if cond=data:comment.author == data:post.author>
<div class=comment-body-author>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>

<b:else/>
<div class=cm_entry>
<span class=cm_arrow/>
<div class=cm_info>
<div class=cm_name>
<b:if cond=data:comment.author == data:post.author>
<a expr_href=data:comment.authorUrl rel=nofollow target=_blank>
<data:comment.author/>
</a>
<b:else/>
<b:if cond=data:comment.authorUrl>
<a expr_href=data:comment.authorUrl rel=nofollow target=_blank>
<data:comment.author/>
</a>

Go to link Download

Posted by Unknown at 9:00 PM
Email This BlogThis!Share to X Share to Facebook Share to Pinterest

Labels: 2, blogger, cara, comment, membuat, pada, part, reply, seperti, wordpress