Cara Membuat Threaded Comment di Blog

Cara Membuat Threaded Comment di Blog - Ada beberapa hal yang bisa menunjang penampilan blog sobat, kali ini saya akan kasih tahu salah satunya. Namanya Threaded Comment. Threaded Comment adalah form komentar di mana komentar balasan letaknya akan berada di bawah komentar utama.

Dengan Fasilitas ini, sobat tak perlu lagi memoderasi komentar dengan alasan untuk memudahkan membalas komentar tersebut. namun perlu di perhatikan bahwa dengan memasang Threaded Comment di Blog, maka emoticon yang sobat pasang baik itu emoticon onion , emoticon kaskus, emoticon skype ataupun yang lain akan terhapus dan tak akan muncul di kotak komentar blog sobat. Bagi sobat yang tertarik membuat comment threaded silahkan ikuti tutorial berikut.

Cara Membuat Threaded Comment di Blog

A. Tanpa Edit HTML

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML --> Klik Download template lengkap untuk antisipasi kegagalan.
3. Klik tulisan Kembalikan template widget ke default kemudian klik OK.
4. Selesai.. sekarang Threaded Comment nya sudah ada.

Tambahan :
Cara di atas akan menghapus seluruh data widget di HTML blog sobat. termasuk navigasi breadcrumb,related post dll. jadi bagi sobat yang sudah terlanjur memasang navigasi breadcrumb, related post dll, saya sarankan untuk menggunakan tutorial yang berikut.

B. Edit HTML

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML --> Klik Download template lengkap untuk antisipasi kegagalan -->Klik Expand widget template.
3. Cari kode berikut dengan menggunakan Ctrl + F.

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

4. Ganti dengan 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>
5. Klik save dan selesai.

tambahan :

Sobat akan menemukan 4 kode <b:include data='post' name='comments'/>. hapus dan ganti semuanya.

Sobat yang ingin membuat threaded comment seperti blog ini silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML --> Klik Download template lengkap untuk antisipasi kegagalan -->Klik Expand widget template.
3. Letakkan kode berikut di atas kode ]]></b:skin>.

/*----------------------------------------------------
{--------} Comment {--------}
----------------------------------------------------*/

#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;
}

.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;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPQiU3UtYy8ZOHsM3jNBbZo76NkaltMqnLoIR-cRmw6F5FZdqs4RJbV3v0GeEgXlATmRvvqAucj6VWiW9cFrsjCJ5zGvhKkvBgi3JEP8Sh2SzC-LNMZhNIqHYNEguYX8JBzwn-n82cwEw/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;
font-weight: bold;
float: left;

}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
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 {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #dff0fa;
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;
}

5. Letakkan kode berikut di atas kode </body>

5. Cari kode berikut dan hapus kode di antara ke 2 kode tersebut. ( kode tersebut cukup panjang )

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

Kode yang harus di ganti

</b:includable>

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

6. Ganti __BlogID__ dengan id nya sobat. untuk mengetahui id blog sobat lihat gambar berikut.

7. Simpan template dan lihat hasilnya..

semoga Cara Membuat Threaded Comment di Blog ini bisa membantu sobat dalam menghias blog.

49 comments

Write comments

info penyakit dan obatnya

AUTHOR

22:59:00 delete

pertamaaaaxxxxxx mas. . .
mantap nihh, dengan threaded comment, berkomentar jadi lebih bervariasi dgak cuma satu deret aja, tp bisa tanya jawab. . .
ijin copas scriptnya mas. . .

obat alami untuk usus buntu

23:00:00 delete

ajiibbbb infonya.,,
bermanfaat sekali nihh untuk meng-custom kolom komentar.,,
ajibbb gan.,,

Catatan Darmanto

02:58:00 delete

mantaps sob tutorialnya,kotak coment diblog jadi lebih keren ya..?

bangjal dua tiga

06:37:00 delete

keren ne sob.. thank dah berbagi.. ane kayaknya belum mau kek gtu sob..hehe

msih betah kek komen standar.hehe

BagiBagiBlog

10:09:00 delete

Wadaw.. Ayas udah nyobain.. tapi kok gk muncul2 yach???
Padahal udah sama persis kodenya... OMG!!!
^_^

Tian

15:44:00 delete

@BagiBagiBlogmaaf sob.. kelupaan scriptnya.. hehehe

sekarang sudah siap bro.. silahkan..

makasih sudah berkunjung.

obat sakit gagal ginjal

00:13:00 delete

mas ini memang kreatif orangnya.....update terus ya gan...

Alpin Janitra

21:53:00 delete

wew Kerenn ..
THX Bang
Nice Share

DAIHATSU MOBILINDO

02:07:00 delete

wah..boleh jg nih mas bro..thax..

FreeDownload

20:45:00 delete

@Christian Makasih infonya gan... Wah infonya bagus", izin copy wat tutorial saya di word..he..

Kreativitas Ngeblog

23:17:00 delete

trimakasih mas tutornya.... :)
berhasil, tapi awalnya saja, yng mengaktifkan threaded coment, step kebawahnya tidak work di blog saya :(

Kodok Online

23:16:00 delete

Thanks gan infonya sangat bermanfaat maju terus buat sobat christian tatelu .... :)
bay the way saya blogger dofollow saya ingin ikut komunitas blogger dofollow :)

Staff Administrator

02:13:00 delete

sob sy dag coba... tapi masih belum bisa ya...apa satu template pengaruh ke widget ini...terpaksa harus default ya sob :D

02:14:00 delete

Forum Batarra

01:42:00 delete

Tidak berfungsi dengan baik di blog saya mas.
Aduh kenapa ini yaaa, mohon bantuannya dong gan.

Trimakasih :-)

Khayr Gathan

19:16:00 delete

Gaya tulisannya membuat bingung

kunjungan perdana

salam kenal

Nakusan Computer

15:07:00 delete

punya saya ko' ga bs ya som, apanya ya yg salah...?
makasih sob dah berbagi.

Putupunyablog

21:12:00 delete

@Christian keren templatenya gan..

Raka Dimas Rudy

15:29:00 delete

akhirnya saya coba udah bisa sob... hehehe mkasih ya tutorialnya...

Sandika16

21:50:00 delete

kereeeen, makasi sob tipsnya..

Khewayz

21:23:00 delete

wah keren nih makasih ya :D

Faris Arifiansyah

20:23:00 delete

Bookmark dulu gan :)

wannesis

21:39:00 delete

Bookmark dulu,ah...Tank,s Gan...!

Anonymous

19:59:00 delete

mantap gan

ERP Indonesia

02:34:00 delete

ane praktekin gan..

06:56:00 delete

Ariato Thank you gan, setelah pusing dibuat oleh kegagalan cara2 sebelumnya akhirnya jadi juga trhead coment q,,,
http://www.ivanslankers.com

Unknown

10:21:00 delete

masih bingung gan..

www.cucu-gendong.blogspot.com

Toko Online

01:55:00 delete

makasih gan, udah dipraktekin di blog ane n berhasil

17:56:00 delete

Mantap gan........terimakasih informasinya.....sekrang saya akan mencoba untk memperaktekannya......jangan lupa kunjungi blog saya gan http://ponda-samarkand.blogspot.com