Pasang Threaded Comment Pada Blogspot

Kang Muroi
21 Feb, 2012
38
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……
Next Post Previous Post
38 Comments
  • eksak
    eksak February 21, 2012 at 2:28 PM

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

    Reply
  • Kang Muroi
    Kang Muroi February 21, 2012 at 2:51 PM

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

    Reply
  • Benny Dwi
    Benny Dwi February 21, 2012 at 3:00 PM

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

    Reply
  • cerita anak kost
    cerita anak kost February 21, 2012 at 3:17 PM

    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.

    Reply
  • Kang Muroi
    Kang Muroi February 21, 2012 at 4:54 PM

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

    Reply
  • Kang Muroi
    Kang Muroi February 21, 2012 at 4:57 PM

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

    Reply
  • Admin
    Admin February 21, 2012 at 6:42 PM

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

    Reply
  • RESUME IMMORAL RELEASE
    RESUME IMMORAL RELEASE February 21, 2012 at 11:11 PM

    nice tutor gan, sukses terus yah. kunjujngan malam

    Reply
  • Kang Muroi
    Kang Muroi February 21, 2012 at 11:14 PM

    @Inuzuka_Grendamin, thanks kunjungannya

    Reply
  • Kang Muroi
    Kang Muroi February 21, 2012 at 11:15 PM

    @Arief Rachmadi Blogger Pemulatrims kunjungan malamnya sob...

    Reply
  • Ahmad Zuhdi Travelife
    Ahmad Zuhdi Travelife February 22, 2012 at 3:07 AM

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

    happy blogging uy :D

    Reply
  • agusbg
    agusbg February 22, 2012 at 3:09 AM

    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?

    Reply
  • rofi
    rofi February 22, 2012 at 9:08 AM

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

    Reply
  • ch000tz
    ch000tz February 22, 2012 at 9:48 AM

    menarikkk :)

    Reply
  • Kang Muroi
    Kang Muroi February 22, 2012 at 10:08 AM

    @Ahmad Zuhdi Travelifetrims sob ikutan komentarnya...

    Reply
  • Kang Muroi
    Kang Muroi February 22, 2012 at 10:09 AM

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

    Reply
  • Kang Muroi
    Kang Muroi February 22, 2012 at 10:09 AM

    @Mohammad Rofiuddinnyimak aja ga apa apa mas hehe...

    Reply
  • Kang Muroi
    Kang Muroi February 22, 2012 at 10:10 AM

    @c'axoera ヅTrims

    Reply
  • Surga Kenari
    Surga Kenari February 22, 2012 at 10:28 AM

    sip sdh sy terapkan :D

    Reply
  • agusbg
    agusbg February 22, 2012 at 12:48 PM

    @Muro'i El-Barezy ok, nanti saya coba..

    Reply
  • BlogS of Hariyanto
    BlogS of Hariyanto February 22, 2012 at 1:29 PM

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

    Reply
  • Kang Muroi
    Kang Muroi February 22, 2012 at 1:52 PM

    @SDF-TYU-JKL-VBNok sukses selalu sob...

    Reply
  • Kang Muroi
    Kang Muroi February 22, 2012 at 1:53 PM

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

    Reply
  • Si Galau
    Si Galau February 22, 2012 at 1:55 PM

    wah..
    q praktekin dh om :3

    Reply
  • Unknown
    Unknown February 22, 2012 at 2:56 PM

    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.

    Reply
  • Kang Muroi
    Kang Muroi February 22, 2012 at 5:43 PM

    @Si Galausilakan sob....ntar ane mampir

    Reply
  • Kang Muroi
    Kang Muroi February 22, 2012 at 5:44 PM

    @de hoppustrimakasih sob..happy blogging aja:)

    Reply
  • Benny Dwi
    Benny Dwi February 22, 2012 at 7:53 PM

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

    nice share ya,,

    Reply
  • Unknown
    Unknown February 22, 2012 at 10:12 PM

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

    Reply
  • Unknown
    Unknown February 23, 2012 at 1:22 AM

    gokiiiil dah mas brooooo. . .hehehe

    Reply
  • Nurmayanti Zain
    Nurmayanti Zain February 23, 2012 at 7:11 AM

    wahh masyaALLAH tutorialnya :)
    semangat ngeblog!

    Reply
  • Ary_Putra
    Ary_Putra February 23, 2012 at 9:31 AM

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

    Reply
  • stupid monkey
    stupid monkey February 23, 2012 at 3:43 PM

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

    Reply
  • Fahri Samudra
    Fahri Samudra February 24, 2012 at 10:39 AM

    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

    Reply
  • Surga Kenari
    Surga Kenari February 24, 2012 at 1:47 PM

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

    Reply
  • Fahri Samudra
    Fahri Samudra February 24, 2012 at 7:10 PM

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

    Reply
  • ibnea
    ibnea March 2, 2012 at 4:25 PM

    sip gan...
    bagus infonya...

    ijin titip link ya gan :

    http://ibtutorial.com/

    Reply
  • Teknokers
    Teknokers March 6, 2012 at 8:10 AM

    thanks gan, trit komentarnya berjalan mulus

    Reply
Add Comment
comment url