Tutorial kali ini akan menjelaskan cara membuat komentar bertingkat seperti wordpress. Tutorial ini tidak menggunkan threaded comment blogger yang baru, tetapi menggunakan sistem komentar lama, dan dimodifikasi sehingga menyerupai komentar wordpress (wordpress threaded comment).
Untuk membuat threaded comment pada system komentar blogger yang baru (baca: Cara Mengaktifkan Threaded Comments Pada Blogspot). Untuk tutorial kali ini, kita akan membuat threaded comment pada sistem komentar lama, seperti screenshoot di bawah ini:
Berikut adalah cara membuatnya :
1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML.
2. Menjaga kegagalan, backup dulu template anda ---> Download Template Lengkap.
3. Centang Expand Template Widget.
4. Tambahkan kode dibawah ini diatas ]]>
#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;
border: 1px solid #DDD;
padding: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUQA3286xTcDRp_W0BlU-8m6m0YM99lezWbfUS6h8yYwZXs3IhEZOHdxWUYlDEu3x6bIQytfv9nb5YqY3kq4QDKcZ4Ks07oFBMaDwr22qTo50-AXeLKH5zcCCcZxj2yDfDXrsOblbK6fk/s1600/takdikenal.jpg) center 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;
}
.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;
background: #fcfcfc;
border: 1px solid #E4E4E4;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU7VqkwAEmEdA0XHt4UIQ1juGobkYk76gdCzIyh-FqCzWGoBCd_9g_l8fDHRVqQk5cEv_Xs-4ncmwXmtE8ElvTgGuIfLtx3vjQgRWgN-DuOSueqJxYI42GcT9-zaKTDK4vpXhsg23puOs/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
float: left;
}
.cm_name_a {
font-family:"Comic Sans MS", cursive;
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:"Comic Sans MS", cursive;
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.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;
}
/* Comment Admin */
.comment-body-author {
font-family:"Comic Sans MS", cursive;
font-weight: 300;
}
5. Tambahkan kode dibawah ini sebelum tag </body>.
<script src='http://sagita-com.googlecode.com/svn/coments.js' type='text/javascript'/>
Nah, berikut ini langkah yang lumayan rumit, karena dibutuhkan konsentrasi yang maksimal agar dapat mengikutinya dengan baik, kode berikut berpengaruh besar pada komentar pada blog Anda, karena dengan kode di di bawah ini akan merubah keseluruhan tampilan komentar pada blog Anda agar sama seperti wordpress.
6. Selanjutnya, silahkan cari kode pembuka <b:includable id='comments' var='post'> dan ditutupi dengan kode </b:includable>.
Diantara kode tersebut didalamnya terdapat kode yang harus Anda ganti dengan kode baru, dan Anda harus meletakan kode baru di bawah ini di antara kode yang sudah ditentuakn, perhatikan langkah-langkah di bawah ini.
<b:includable id='comments' var='post'>
Kode lama Anda yang harus diganti dengan kode baru.
</b:includable>
7. letakan kode baru di bawah ini diantara kode <b:includable id='comments' var='post'> dan </b:includable>.
<div class='comments' id='comments'>Untuk blogID=0000000000000000000, silahkan Anda ganti dengan blogID pada blog Anda, blogID berada pada address bar halaman template anda, contohnya seperti ini :
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<script type='text/javascript'>document.write(unescape('%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%74%75%74%6F%72%69%61%6C%2D%73%61%67%69%74%61%2E%74%6B%2F%32%30%31%32%2F%30%35%2F%63%61%72%61%2D%6D%65%6D%62%75%61%74%2D%6B%6F%6D%65%6E%74%61%72%2D%62%6C%6F%67%2D%73%65%70%65%72%74%69%2E%68%74%6D%6C%27%20%73%74%79%6C%65%3D%27%66%6F%6E%74%2D%73%69%7A%65%3A%39%70%78%3B%66%6C%6F%61%74%3A%72%69%67%68%74%3B%6D%61%72%67%69%6E%2D%72%69%67%68%74%3A%35%70%78%3B%27%20%74%61%72%67%65%74%3D%27%5F%62%6C%61%6E%6B%27%3E%62%79%20%73%61%67%69%74%61%3C%2F%61%3E'));</script>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> <data:commentLabelPlural/>
<b:else/>
<span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
</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'/>
<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=0000000000000000000&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 cond='data:comment.author == data:post.author'>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNea_n2c88zvmE5YAOmkuLo7YZ-2NSQFdMpMUWAS2bWcvx9rYX53HbKoCX8Z49sZ9obGxP_fz0gCSLy9aPb6EgiceMIXdUe41CYP580pS-jY3evhCm448QfShc2P_TMErH9ftSOW1FzPQ/s1600/adminstar.png' title='Admin' width='20px'/>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<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>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<p><data:comment.body/></p>
<span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
</dd>
</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>
8. Simpan Template.
Semoga bermanfaat !