Yang Terbaru

Subscribe Here!

Dapatkan Update Informasi Terbaru dari KANG MUROI Melalui Email

Blog Stats

Pasang Threaded Comment Pada Blogspot

By On 21.2.12

Threaded Commnet
Assalamu 'alikum
Muro'i El-Barezy pernah ditanya oleh sobat Muhammad Hidayat tentang membuat komentar yang ane pake pada blog ini. Walaupun ane sangat kurang bisa dalam edit mengedit, tapi demi berbagi ilmu, ane coba untuk share.Entah dapet dari mana ilmu ini sampe lupa karena udah lama. Bagi para master lewat aja yah hehe... 
Komentar ini dinamakan "Threaded Comment". Dan sobat yang pake template bawaan blogger biasanya sudah tersedia layanan ini, tinggal diaktifkan saja. Tapi bagi yang pake template lain memang harus edit edit lagi.Langsung saja deh silakan ikuti langkah-langkah di bawah ini :
  1. Log in dashboard--> Template --> Edit HTML --> Proceed.
  2. Kemudian klik "Expand Widget Templates"
  3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kode ]]></b:skin>
  4. Copy dan paste kode css ini, di atas atau sebelum kode  ]]></b:skin> 
#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-image: url(http://3.bp.blogspot.com/-PmKxzY3m4xc/TrH6vjTcW7I/AAAAAAAABbU/bjyOcVut-AA/s60/684c851af59965b680086b7b4896ff98.png);
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: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_entry_admin {
padding: 16px;
background: #ccc;
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_name_a {
font-weight: bold;
font-size: 12px;
float: left;
}
.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}
.cm_date_a {
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. Kemudian, dengan menggunakan keyboard, tekan "Ctrl+F" cari kode  </body>

6. Copy dan paste kode ini, di atas atau sebelum kode </body>

<script type="text/javascript" src="http://javscript-code.googlecode.com/files/threaded%20comment.js"></script>
7. Kemudian, copy dan paste kode ini pada notepad dan edit pada kode yang di bold merah dengan menggantikannya dengan ID Blog sobat.

<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments &gt; 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'/>
                            <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='&quot;https://www.blogger.com/comment.g?blogID=7767855516934954389&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
                                </div>
                            </div>

                            <div 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='dofollow' 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>
                            </div>
                        </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. Terakhir, kembali kepada script template sobat. Dengan menggunakan keyboard, tekan "Ctrl+F" carilah kode  <b:includable id='comments' var='post'>

Setelah menemukan kode tersebut, gantilah kode setelah <b:includable id='comments' var='post'> hingga sebelum kode </b:includable> dengan script yang telah di edit ID blognya, seperti ini :

<b:includable id='comments' var='post'>
Paste kode yang sudah di edit pada notepad di bagian ini
</b:includable>


9. Terakhir, klik PREVIEW. Jika tidak terjadi kesalahan, klik Save.
Catatan :
  1. Silakan  pastikan sobat membuat backup pada script template sebelum membuat perubahanl ini.
  2. Pastikan setting Comment Location anda adalah Embedded
  3. Jika avatar(gambar profile) comment tidak berada betul-betul di tengah kotak, silakan cari kode css yang seperti ini dan delete.
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #eeeeee;
}
Semoga bermanfaat……

39 komentar

mantep, tutorialnya sob! tp knp ya skrip yg dispoiler gk bs ane liat? apa perangkat ane yg eror? hehehe

@eksakwah iya tadi perangkat ane yang error sob..udah di perbaiki hehehe....

cakep bener nih,,,
tapi pas saya praktekin kok kolom komentarnya malah ada 2 yah ??

wah ane perna gan bikin kaya begini, tapi belum berhasil. yang ada icon emotion pada kabur, dan be3ntuknya ga proporsioanal dengan tmplate ane. mungkin karena ane make skrip yang salah kali ya, ane coba pake punya ente. barangkali bisa berhasil. makasih ya sobat.

@Benny DwiCoba aja lagi sob, mungkin ada script yang salah, lebih teliti lagi

@cerita anak kostsilakan sob di coba lagi, mudah mudahan berhasil, tapi mungkin ga usah pake emoticon kali ya, bikin rame hehehe...

mantab sob ! saya udah pake trik itu ! semoga bermanfaat !

nice tutor gan, sukses terus yah. kunjujngan malam

hmm.. nice share sob. infonya mantab.. :)

happy blogging uy :D

pengen yang kayak gini, jawab komen berada dibawahnya...

mas kalau mengikuti cara di atas kan yang sebelumnya sudah ada, kira kira yang model lama itu muncul juga nggak ya?

wasuuh....kode apa semua itu Kang...hehehe..ane Ga paham Blas....hehehehe...sukses aj dech Bwt Abang...(^_^)

@agusbgscript diatas menggantikan komentar yang lama sob, asal teliti bisa...

nice tutorial tentang threaded comment..sungguh mudah dipahami..trimakasih sudah berbagi sobat :-)

@BlogS of HariyantoThanks kunjungannya sobat, sukses selalu...

setalah mencari kesana-kemari akhirnya saya mendapatkan sperti yang saya harapkan,kemaren-kemaren tidak sesuai dengan yang saya harapkan,terimakasih banyak sobat,berkat post in saya jadi happy. Post yang mantap banget deh pokoknya.

@de hoppustrimakasih sob..happy blogging aja:)

@Muro'i El-Barezy
gak jadi Pasang Threaded koment sob pusing,jadinya pasang koment admin beda warna :D

nice share ya,,

Mohon maaf dulu bila saya sering hadir terlambat,maklum lagi agak sedikit sibuk di darat.
Makasih banyak infonya kawan,happy blogging .

gokiiiil dah mas brooooo. . .hehehe

wahh masyaALLAH tutorialnya :)
semangat ngeblog!

Wowww,,,Menarik sekali gan tips cara bikin Threaded Comment Pada Blogspotnya. bisa nambah pengetahuan baru nih. Thanks infonya kawan, salam sukses

mantab sob, tutor ini menjawab banyak pertanyaan dati temen-temen ya, sukses sob :D

Wah, ini nih yg ane bingungkan dari sebulan yg lalu, coba ane pake tutor yg ini ya? Soalnya dari dulu ane coba, nggak bisa-bisa, malah hancur tampilannya, karena ane kotak komentarnya sudah berubah kayak yg punya ane sekarang, aduh, gimana ya?? Semoga pada kesempatan kali ini ane bisa, amiiinn... Terima kasih sudah share sob

@Fahri Samudra ikuti dgn seksama kk, jgn tergesa-gesa dan terburu buru. sabar dan perhatikan setiap kode2 yg ada. pasti bisa :) godluck

@SDF-TYU-JKL-VBNOK sobat, amiiinn... Terima kasih atas dukungannya, sekarang dalam tahap percobaan

sip gan...
bagus infonya...

ijin titip link ya gan :

http://ibtutorial.com/

sip gan...
bagus infonya...

ijin titip link ya gan :

http://ibtutorial.com/

thanks gan, trit komentarnya berjalan mulus