Komentar Bertingkat dengan Warna Komentar Admin yang Berbeda

Sebelumnya saya pernah memosting tentang cara membuat komentar bertingkat di Blogger. Komentar bertingkat atau threaded comments ini dibuat oleh pihak Blogger sendiri. Namun, di template blog ini, saya tidak menggunakan komentar bertingkat buatan Blogger tersebut.

Saya memakai komentar bertingkat dari blog Artis Tutorials untuk blog ini. Komentar bertingkat yang satu ini sudah dilengkapi dengan adanya warna kotak komentar admin yang berbeda dengan warna kotak komentar pengunjung. Bila teman-teman berminat untuk memasang komentar bertingkat ini, silakan pergi ke http://artistutorial.blogspot.com/2012/01/threaded-comments-for-blogger-comment.html untuk melihat langsung tutornya. Jika teman-teman mengalami masalah dalam pemasangannya, silakan bertanya kepada admin blog tersebut.

Bagi teman-teman yang menggunakan template Thesis Blogger karya Blog Juragan seperti yang saya pakai ini, bisa disimak pengalaman saya dalam memasang komentar bertingkat buatan Artis Tutorials di bawah ini.

1. Masuk ke akun Blogger.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk membuat backup template.

4. Beri tanda centang di "Expand Template Widget".

5. Cari kode ]]></b:skin> dan letakkan kode berikut di atas kode tersebut.

/*----------------------------------------------------
{--------} 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/AVvXsEgAx75FubvRnkQLNwezSD_Xl4nLm_1IjLY33xJmu6vC3eVnBWl2Pnfw2Zfdz_baFLUoO4q3ybFzqvqstKwsMYcvJlhoN8ejtWmPmjAg6xB3dFngpYlSkOHrOatRikbcB4eyQT6jShY7tn4/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;
}

6. Kemudian cari kode </body> dan taruh kode berikut di atas kode tersebut.

7. Selanjutnya cari kode yang seperti di bawah ini.

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

susunan kode yang harus diganti

</b:includable>

8. Ganti kode-kode yang berada di antara includable tersebut dengan kode di bawah ini.

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

Ganti __BlogID__ (ada 2) dengan nomor blog ID kita.

Cara menemukan Blog ID, lihat gambar di bawah.

Blog ID bisa ditemukan di browser address pada menu "Rancangan".

Blog ID adalah nomor yang diberi border merah.
Selain itu, saya juga mengganti kata "Reply" (ada 2) dengan kata "Balas".
Kemudian saya juga mengganti kata "comment" dan "comments" dengan kata "Komentar".

9. Klik tombol "SIMPAN TEMPLATE".

Sampai di sini komentar bertingkat ini sudah dapat berjalan atau bekerja. Namun, warna pada kotak komentar admin masih bertumpang tindih dengan warna komentar admin bawaan template blog ini. Untuk itu saya menghapus kode di bawah ini agar komentar bertingkat ini berjalan dengan baik.

.comment-body-author {
background: #fee6e6; /* Warna Background */
border:2px dotted #d31111; /*Border*/
margin:0;
padding:0 0 0 0px;
}

Saya tidak mengetahui apakah bila cara di atas dipraktekkan pada template yang lain akan mempunyai hasil yang sama dengan template blog ini.

17 Comments

Kang MuroiMarch 12, 2012
wah yang ini lebih mantabbs gan, izin sedot ya:}
MunadiMarch 12, 2012
@Muro'i El-Barezy Silakan dicoba gan, klo ada pertanyaan bisa ditanyakan di blog tersebut atau bisa juga baca-baca pertanyaan2 yang sudah ada di komentarnya.
BotCr3w_JrMarch 12, 2012
mas, cara buat kolom widget yg rata header gimana mas ?
masmandraMarch 12, 2012
waah keren gan tapi datanya banyak banget..??
MunadiMarch 14, 2012
@BangBot Cyber4rt Yang rata header? maksudnya kayak gmana mas?
MunadiMarch 14, 2012
@masmandra Iya nih gan, emang banyak datanya..
VavaHeirroMarch 14, 2012
@Munadi yang kyk punya mas gitu
MunadiMarch 20, 2012
@BangBot Cyber4rt Maksudnya yang ada di sebelah kanan header yah?
MunadiMarch 21, 2012
@BangBot Cyber4rt Coba cek yang ini deh mas, http://klikmunadi.blogspot.com/2012/03/cara-membuat-kolom-widget-di-sebelah.html
cyberfrogteam (ADMIN)April 06, 2012
emank bagus cara seperti ini
tapi TERLALU BERAT DAN RATA SIZE YANG DIHASILKAN ADALAH 10KB
tapi...nice post
ditunggu realbacknya gan
MunadiApril 10, 2012
@╚══█▓▒╣Cyberfrogteam╠▒▓█══╝ Terima kasih gan..
anyApril 20, 2012
akhirnya berhasil juga. thanks walau agak berat, oiya kalo bisa ga kalo kotaknya diganti sama warna biru. kalau bisa gimana caranya??
MunadiApril 20, 2012
@any Kotak bagian mananya nich? kotak pengunjung ato kotak admin?
Putupunyablog | Tutorial BlogMay 17, 2012
permisi gan, saya sudah praktekin di blog saya. tapi bgaimana gan cara memberi scroll pada komentar versi ini? dan gimana cara mengubah warna nama orang yg berkomentar gan? klau agan tdak jelas, coba lihat screenshot nya gan di http://3.bp.blogspot.com/-SFOuALnMmp0/T7TA_tAaiPI/AAAAAAAAAyQ/shPYel5NNl8/s1600/form-komentar-tingkat.jpg . terimakasih.
UnknownSeptember 02, 2012
keren gan'
kunjung balik ke sini gan
http://toolsvirus.blogspot.com/
SkociSeptember 04, 2012
Sip gan ane coba...
akang samJanuary 31, 2013
wah html-nya banyak sekali gan, apakah itu tidak akan membuat blog kita berat? thanks before

Klik Munadi

17 Comments

Post a Comment

About Us

Contact Form

Komentar Bertingkat dengan Warna Komentar Admin yang Berbeda

You might like

17 Comments

Post a Comment

Contact Form