Cara Pasang Fungsi Threaded Comment

Assalammualaikum
Disebabkan ada yang request macam mana Aini buat butang relpy bawah gambar seperti gambar dibawah :

Maka tak nak menghampakan beliau Aini pun buat jugalah.Tapi tuto ni perlu berhati-hati yer.Sila pastikan buat backup dulu sebelum melakukan tutorial ini.Jika tidak kamu akan menyesal jika ianya tidak menjadi.Ingat backup dulu!!!

Fungsinya adalah memudahkan untuk membalas setiap komen yang diberikan.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.Ikuti langkah dibawah:

1. Log in dashboard--> Template --> Edit HTML --> Proceed.

2. Seterusnya tick "Expand Widget Templates"

3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod ]]></b:skin>

4. Copy dan paste kod css ini, di atas atau sebelum 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirg9fE6uFFn4hPraoFyZGYxDi7efBChO-BqqnHVzVXZdvPrdVWJ9X9n_Jdh8ku1dVRRU9AgiEeH3Wn8X72xDvDq6lTuj3FbIDfb6wGJEySxrnJqwr7-5b9TIE6MhK-TkfJEKwUbkIJzoZT/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9cZ9-HAQRYqcIROQdDf7P-N9xo2cwr3j8H_Wkb87MIlol4R6X37QwrJ6iAQtbHnxQbM9f8RHMwiksj6kovGfwsvVlqh88T6lh_nQdTVq80iRdKWMbj_cuO23soPSR7hvguXyIPwrz-WA/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. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod </body>

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

<script type="text/javascript" src="http://javscript-code.googlecode.com/files/threaded%20comment.js"></script>                                                                             

7. Seterusnya, copy dan paste kod ini pada notepad dan edit pada kod yang di bold merah dengan menggantikannya dengan ID Blog anda.

Contoh ID blog saya : http://www.blogger.com/blogger.g?blogID=4823928882486752556

<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
4823928882486752556=&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. Seterusnya adalah langkah akhir yang merumitkan sedikit. Kembali kepada script template anda. Dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <b:includable id='comments' var='post'>

Selepas menjumpai kod tersebut, delete kod-kod yang bermula selepas kod <b:includable id='comments' var='post'> hingga sebelum kod </b:includable>

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>
       ------------ Sebahagian daripada kod yang perlu di delete -------------------

      <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>

9. Kemudian, copy kod yang telah siap di edit pada notepad ( rujuk langkah ke 7) dan paste pada kod yang telah anda delete pada langkah ke 8 di atas.

<b:includable id='comments' var='post'>
Paste kod yang siap di edit pada notepad di bahagian ini
</b:includable>

10. Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save.

p/s:

 1. Sila pastikan anda membuat backup pada script template sebelum membuat tutorial ini.

2. Pastikan setting Comment Location anda adalah Embedded (Lokasi Ulasan = Terbenam).

3. 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;}

Kredit : MariBinaBlog