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/AVvXsEglKDQiJo8spvVgkBxsCoXKXRnqxvCnL1wYglQ5tF-O7Nfi7ced4e_5rYL6RCc5eS26XKtQD1txe2e-nusbP6g1fkk8VbNQebGZdxJvGPUTnY35X4T6f19PXbRG5pfL8rppMP6OBzBjhjo/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>
<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:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>

SANGAT PENTING: Kode __BlogID__ ganti dengan BlogID blog kamu, cara untuk mengetahui BlogID kamu adalah lihat di address bar pada saat kamu sedang membuka Template, untuk jelasnya lihat gambar berikut.{ingat ada dua yang harus di ganti}

angka yang dikurung kotak merah tersebut merupakan BlogID anda

9. SANGAT PENTING. Walaupun anda telah mengikuti semua cara di atas, itu semua akan percuma jika anda menggunakan Blogger threaded comment system. jika anda menggunakan Fitur Blogger tersebut maka ada step tambahan.

Cari kode berikut

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

nah maka anda akan mendapatkan 4 kode yang serupa, lalu ganti ke empat kode berikut dengan kode berikut

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

10. nah jika semua tahapan telah di lakukan terakhir kita tinggal klik Simpan Template.
selesai...

semoga anda yang mencoba cara langsung berhasil, karena jika tidak maka anda akan strees seperti saya pada saat pertama mencoba trik ini jadi GOOD LUCK
Assalamualaikum wr. wb

-Semoga Bermanfaat (^^,) -

Wednesday, March 28, 2012

Cara Membuat Reply Comment Pada Blogger Seperti WordPress Part 2

6 comments:

Search

About Me

Visitor