Mas Sehat | Blog Tentang Kesehatan | Mas Sehat ~ Blog Tentang Kesehatan | www.mas-sehat.com

Cara Memasang Fungsi Threaded Comment

Najibblog, Oke sob setelah posting tentang sekolah manajemen perhotelan IHS, sekarang saya akan posting tentang Cara Memasang Fungsi Threaded Comment yang sebelumnya pernah ditanyakan oleh sahabat Blogger Ian Desain. Sebenarnya apa sih isi tulisan ini? Sobat Blogger bisa melihat gambar berikut mengenai isi dari postingan ini :
Seperti itulah postingan kali ini, fitur reply menjadi bisa langsung kegeser disebelah kanan komentar yang direply.
Oke, langsung saja ke TKP :
Langkah Pertama :
Login => Dashboard => Template => Edit HTML => Lanjutkan => Centang Expand Widget
Langkah Kedua :
Cari kode ]]></b:skin>
Langkah Ketiga :
Pastekan kode berikut diatas 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://najib.googlecode.com/files/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_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://najib.googlecode.com/files/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_date {
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;
}
Langkah Keempat :
Cari Kode </body>, setelah itu pastekan kode berikut diatas kode </body>
<script type="text/javascript" src="http://najib.googlecode.com/files/threaded%20comment.js"></script>
Langkah Kelima :
  Hapus Kode antara kode <b:includable id='comments' var='post'> sampai dengan </b:includable> (kode yang berwarna biru yang harus didelete)
Contoh :
<b:includable id='comments' var='post'>
<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>
       ------------ sebagian kode yang harus didelete -------------------

      <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>
</b:includable>
Langkah Keenam :
Paste kode berikut ini diantara kode  <b:includable id='comments' var='post'> sampai dengan </b:includable>
<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>
    
        <div class='cm_pagenavi' id='cm_page'></div>
    
        <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=1091981693933017625&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'></span>
                                <div class='cm_info'>
                                    <div class='cm_name'>
                                        <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>
                                    </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'></div>
    
    <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>
 Jadinya seperti ini :
<b:includable id='comments' var='post'>
<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>
   
        <div class='cm_pagenavi' id='cm_page'></div>
   
        <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=1091981693933017625&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'></span>
                                <div class='cm_info'>
                                    <div class='cm_name'>
                                        <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>
                                    </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'></div>
   
    <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>
</b:includable>
Ganti kode yang berwarna biru dengan ID blog sobat.
Langkah Ketujuh :
Klik Preview, lalu Klik SAVE.
Selesai deh.. Oke sob, cukup sekian dulu postingan saya, sampai berjumpa kembali dipostingan yang akan datang, jangan lupa komentar dan sedekahnya..hehe.. :)

Source : http://maribinablog.blogspot.com/2011/11/terkini-cara-pasang-fungsi-threaded.html
Disclaimer:
Terima kasih telah membaca artikel tentang Cara Memasang Fungsi Threaded Comment di blog Najibblog2010 , semua yang ada diblog ini hanyalah sebagai informasi semata, pemilik blog tidak berniat untuk merugikan pihak manapun, pemilik blog merekomensasikan dan mengharuskan para pengunjung blog ini untuk membeli progam atau game full version kepada pemilik software untuk mendapatkan software versi full version dan bukan hasil patch atau crack atau istilah yang sejenis lainnya. Pemilik blog menghargai hak cipta pemilik software atau hak cipta, pemilik blog akan menghapus postingan jika Anda merasa dirugikan akan postingan yang ada di blog ini sebagai pemilik software atau hak cipta. Silahkan mengirim email ke najibsangar@gmail.com untuk menghubungi pemilik blog. Pemilik blog akan merespon Anda secepat mungkin. Jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Mas Sehat | Blog Tentang Kesehatan | Mas Sehat ~ Blog Tentang Kesehatan | www.mas-sehat.com

90 komentar

Thanks ya sob udah ane praktekin di blog nie contohnya http://ian-komputer.blogspot.com/2011/12/cara-merakit-komputer-gaming-5-jutaan.html

Balas

keren banget, komentarnya jadi lebih hidup

Balas

salam kenal juga sob, smoga sukses untuk trik2 blog nya :t

Balas

makasi bnyak gan info nya di tunggu update berikutnya
izin nitip link yaa!!!!!

Balas

Sippp
Thank Gan,.,. Manstappp
Ane udah Coba

Balas

Tips yang bermanfaat Sob. bagus untuk menjawab semua komentar dengan baik. Nice share and happy blogging!

Balas

klo ini mash saya udah pernah nemuin gan,,

Balas

mantap postingnya bro..

patut di coba..
salam kenal!!

Balas

waaaaww keren lama lama blogger mirip wordpress ya :d keren!!

Balas

seperti punyanya sobat ini ya? mirip intensedebate ya ternyata :D mantap!

Balas

ini buat blogspot atau wordpress? atau dua-duanya bisa,,
makasih gan buat infonya,,salam kenal ya

Balas

Ikut menyimak artikelnya Gun :-)
Silahkan mampir2 juga ke Web saya: Iklan Baris Gratis Tanpa Daftar.

Salam,

Balas

oke sob follow sukses kutunggu follbacknya, makasih

Balas

info yang menarik gan
maju teruz dan sukses selalu!!!!

Balas

waduh sob, ribet amat liat kode scriptnya.
saya udh suka dgn tampilan komentar yg saya punya sob. simpel aja.
:)
blogmu dah aku follow tuh...
yg sering2 mampir ya, biar bs saling komen.

Balas

keren gan, tapi scriptnya agak panjang juga yah...
agak bingung pertamnya ane gan...

Balas

Mantaf sob,hehehehe.... jarang banget ada tutorial kaya gini :)

Balas

terimakasih kawan sudah berbagi tutorial yang menarik dan bermanfaat ini, jadi minat segera mengupdate tampilan kotak koment-ku :-)

Balas

hmm, kodenya lumayan panjang yah, tapi komentarnya jadi jelas dan keren kyk punya WP, ehehehe

saya berharap besok2 blogger[dot]com sndiri yg kasih fitur reply jadi biar lebih mudah kyk WP :)

Balas

Ikut menyimak artikelnya Gun :-)
Silahkan mampir2 juga ke Web saya.

Salam Outbound !

Balas

Inilah yang saya cari.
benar-benar bermanfaat

Balas

@Ladida

Saya juga sangat berharap sob, byar lebh menarik dan dinamis, lg pula juga lebih udah dalam membalas komentar.. :D

Balas

wao keren infonya mas, ane da follow follnack ya

Balas

wahh,,pengen nyoba gan,,tapi lihat script nya banyak juga ya,,saya takut gagal nih,,solanya pernh nyoba mendesain blog malahan gagal,,,

Balas

info yang bagus gan
smoga bermangfaat bagi para blogger

Balas

info yang sangat bagus gan.
salam kenal ya dan terus berkarya

Balas

kok komentar yang disini ngga mirip kayak yang gambar diatas sobb, lupa masang scriptnya kali ya?

Balas

Gagal dengan suksus, mungkin karena pake template klasik kali,ya..jadi ga bisa di parse melulu..nasib..nasib..

Balas

@Dwijayasblog

Silahkan dicoba di blog yang lainnya sob, yang makek template bukan klasik...siapa tahu berhasil.. :D

Balas

artikel yang bagus gan untuk disimak
salam mas bro

Balas

@Farixsantipsbtw selamat tahun baru ya sob semoga tahun tahun sebelumnya jika mengalami sebuah masalah atau kegagalan, di tahun kedepannya sebagai injakan untuk memperbaiki masalah yang lalu dan menjadi manusia yang lebih baik :) maaf sob ane telat ngucapinnya kesobat :)

Balas

wah mantap gan, thank buat infonya bermanfaat sekali.

Balas

mang keren trid coment asal vietnam ini, pernah juga tak pasang di blog saya

Balas

terima kasih sob , sangat bermanfaat

Balas

tampilannya mirip komen FB y sob?
seklaian membalas follow

Balas

Ini kira-kira bisa di scroll gak komentnya ? cz berat gan..

Balas

sciptnya panjang banget..apa tidak memberatkan loading blog dengan tambahan script yang begitu banyak???

Balas