Pasang Threaded Comment Pada Blogspot

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUV3jyi9P2sOLiNgBHt5qq2qhmpIxGSNxHGcmthj1RSKuDLdHZ9cbAjojWeH_SWNTxkHqU2_5SZwZz5MsmESmNZaSZAawL3M3kfSqsWIgJ94XaL3jfkxN79DovtBvjrhwu2OQVy3bQw4tU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO7av9maf3wjsex21RoFa2TaDSmZHFGdx8Wo3y0ngp-EGLI67EaEp9JQKZqLshq6xlVIf3Uhp7DomEDj983u09fFVf1O8O1EPA8_P23AXt7SMFrRUKau2-XW9yf-9imnxvbR2rXyLnBCE/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……

Post a Comment

38 Comments

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

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

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

    ReplyDelete
  4. 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.

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

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

    ReplyDelete
  7. mantab sob ! saya udah pake trik itu ! semoga bermanfaat !

    ReplyDelete
  8. nice tutor gan, sukses terus yah. kunjujngan malam

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

    happy blogging uy :D

    ReplyDelete
  10. 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?

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

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

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

    ReplyDelete
  14. 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.

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

    nice share ya,,

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

    ReplyDelete
  17. gokiiiil dah mas brooooo. . .hehehe

    ReplyDelete
  18. wahh masyaALLAH tutorialnya :)
    semangat ngeblog!

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

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

    ReplyDelete
  21. 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

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

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

    ReplyDelete
  24. sip gan...
    bagus infonya...

    ijin titip link ya gan :

    http://ibtutorial.com/

    ReplyDelete
  25. thanks gan, trit komentarnya berjalan mulus

    ReplyDelete