Home » Tutorial Blogspot » Tutorial Blogger: Cara Membuat Komentar Bertingkat - Threaded Comment [Bagian Pertama]

Dec 30, 2011

Tutorial Blogger: Cara Membuat Komentar Bertingkat - Threaded Comment [Bagian Pertama]

Kekurangan kotak komentar Blogspot adalah sulitnya membalas (reply) komentar tepat langsung dibawahnya. Memang sudah ada blogger yang membuat script agar dapat membuat reply, namun kelemahan script tersebut adalah balasan (reply) komentar terletak jauh dibawah komentar awal. Nah, blogger Artis Tutorial telah berhasil membuat solusinya, dia menemukan script agar reply komentar dapat langsung diberi tepat di bawah komentar awal. Berikut ini tutorialnya.

Untuk diketahui tutorial ini ditujukan bagi kalian yang sudah terbiasa mengedit template. Karena itu terserah kalian apakah akan menggunakan dashboard baru atau dashboard lama Blogger.

1. Simpan (save) template anda dulu. Terkadang tidak semua template cocok dengan script dibawah ini. Jadi kalian dapat kembali ke template awal bila mengalami kegagalan.

2. Centang "Expand Widget Templates"

3. Cari kode ini ]]></b:skin> gunakan Ctrl+F untuk mencarinya.

4. Diatas kode ]]></b:skin> tambahkan kode berikut ini:

#comments h4 {

font-size: 24px;

font-weight: normal;

margin: 20px 0;

}

.cm_wrap {

clear: both;

margin-bottom: 10px;

float: right;

width: 100%;

}

.cm_head {

margin: 0;

width: 70px;

float: left;

}

.cm_avatar {

margin: 0;

vertical-align: middle;

border: 1px solid #DDD;

padding: 3px;

background: white;

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: #F7F7F7;

border: 1px solid #E4E4E4;

overflow: hidden;

}

.cm_arrow {

display: block;

width: 9px;

height: 18px;

background: url(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat;

position: absolute;

margin-left: -25px;

}

.cm_info {

margin-bottom: 5px;

}

.cm_name {

font-weight: bold;

font-size: 12px;

float: left;

}

.cm_date {

font-size: 10px;

float: right;

font-style: italic;

color: #CCC;

}

.cm_entry p {

margin: 0;

font-size: 13px;

color: #666;

}

.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;

}

5. Lalu temukan </body>

6. Tepat diatas kode </body> tambahkan kode berikut:

--></script>

7. Temukan kode:

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

Kode sangat panjang yang akan/harus diganti (lihat kode di langkah ke-8)

</b:includable>

8. Diantara kedua kode tersebut, ganti kode sangat panjang tersebut dengan kode berikut:

<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>

</h4>

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.isDeleted'>

<b:else/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

</div>

<a expr:href='"https://www.blogger.com/comment.g?blogID=154513103004606848&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>

<b:if cond='data:comment.authorUrl'>

<data:comment.author/>

</a>

<b:else/>

</b:if>

</div>

<data:comment.timestamp/>

<b:include data='comment' name='commentDeleteIcon'/>

</div>

</div>

</div>

</b:if>

</b:loop>

</div>

<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'>

</b:if>

</div>

9. Selesai.

PENTING!

Pada langkah ke-8 ganti 154513103004606848 dengan ID Blog anda. Untuk mengetahui ID Blog anda, antara lain dapat dilihat saat anda membuat postingan, anda akan menemukan kode semacam ini di alamat url:

http://www.blogger.com/post-edit.g?blogID=324645882364XXXXXXX&postID=271964917447XXXXXXX

Kode warna biru adalah kode ID Blog.

Tambahan:

Paling menyenangkan memakai komentar bertingkat bila tidak menggunakan moderasi komentar. Tapi terserah kalian juga sih.