Tutorial : Threaded Comment

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera

NOTA SEBELUM BUAT TUTO NI.
1. Baca Bismillah
2. Sila pastikan anda membuat backup pada script template sebelum membuat tutorial ini. *PENTING*
3. Pastikan setting Comment Location anda adalah Full Page

  Hadifah kreditkan tuto ni dekat Faqihah Husni. Hadifah ada tiru ayat die sikit2 hihi. Sorry kihah. Korang tahu tak threaded tu apabenda? mesti tak tahu kan? Okey. boo :P. Sorry2. LOL. Threaded comment tu bermaksud Komen Berantai.. Ah! Lagi korang tak pahaam kan? Ni lah tengok gambaq ni


  Okey dah tahu kan?.. Fungsi Threaded Comment atau Komen Berantai ini memudahkan untuk kita menjawab setiap komen yang telah diberikan pada sesebuah posting. Hanya klik pada Reply untuk membalas setiap komen tersebut dan komen yang di reply itu akan berada di bawah setiap komen yang diberikan oleh pembaca. Untuk membina Threaded Comment pada bahagian komen blog anda seperti yang boleh di lihat pada bahagian SINI, sila ikut langkah-langkah di bawah.
  1. Template >> Edit HTML >> Proceed >> 
  2. Tick Expand Widget Templates
  3. Tekan F3 cari kod ]]></b:skin>
  4. Copy kod yang hadifah akan bagi ni, then pastekan DI ATAS kod ]]></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_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_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;
}
  5. Dah paste, sekarang korang tekan F3 cari kod </body>
  6. Copy dan paste kod yg hadifah akan bagi then paste DI ATAS kod </body>
<script type="text/javascript" src="http://javscript-code.googlecode.com/files/threaded%20comment.js"></script>
  7. Copy kod ni dan paste di notepad DAN edit pada bahagian yg ditulis ID BLOG KORANG 

<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=ID BLOG KORANG&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>
  8. Langkah terakhir ini amat merumitkan. So,korang kena hati-hati! Sediakan payung sebelum hujan *paham2 jelah*. Now, korang tekan F3 cari kod  <b:includable id='comments' var='post'>.. Bila dah jumpa kod tu, korang kena delete kod SELEPAS kod <b:includable id='comments' var='post'> sehingga sebelum kod </b:includable>

CONTOH

  Yang dihighlightkan WARNA BIRU SAHAJA korang padam. Yang warna Oren JANGAN. Harap2 lah korang paham step number eight ni TT^TT.

  9. Dah siap padam, korang copy balik kod yang korang dah paste kat notepad tadi [rujuk langkah 7]. Dah copy kod dari notepad tadi, korang paste pada kod yang telah korang delete dekat step 8 tadi. Contoh :
<b:includable id='comments' var='post'>paste kod yg korang paste kat notepad tadi
</b:includable>
  10. PREVIEW DAHULU. Takde error baru save :)

Nota :

Jika avatar(gambar profile) comment tidak berada betul-betul di tengah kotak, sila cari kod css yang seperti ini dan delete

.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #eeeeee;
}  (DELETE KOD NI)
Harap sangat lah korang paham tuto ni.. Dan harap korang punya blog takde masalah. Klaau ada masalah, bukan masalah saya. Sebab hadifah dah cakap awal2. backup dulu koding2 blog korang baru ikut tuto ni. Semoga maju jaya ^^. lol



1 comment:

  1. Thank you buat tuto !! Hooray ! Bolehlah sy buat nanti ^_^

    ReplyDelete

Tekan "publish" sekali je tau

Terima kasih komen

BUDI BAHASA BUDAYA KITA :)