TUTORIAL PASANG FUNGSI THREADED COMMENT

pagi ni aku wat tutorial macam mane nak pasang fungsi threaded comment, fungsi ni adalah untuk memudahkan kita membalas setiap comment dari readers hanya dengan menekan button reply, dan comment kita akan dipaparkan dibawahh setiap komen tu. senang cite, setiap komen ade reply kat bawah. 

kalau tak tau jugak, ni contoh comment form kat blog aku ;) tapi buat  ni agak susah and panjang, jadi untuk langkah keselamatan, korang download dulu full template korang, takut ade error kat mana-mana nanti.

pergi pada Dashboard -> Design -> Edit HTML

seterusnya tick "Expand Widget Templates"

 tekan "Ctrl+F" cari kod ]]></b:skin>

 copy dan paste kod css ini, di ATAS atau SEBELUM kod ]]></b:skin> tadi.

#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/AVvXsEhSLfsYg8QWcuLwaGu1U3B4HfjlrAGIDaUrh_AT30QmJbZEhyBF7cgxM-SFWSLJB6_wCfCOkIH7-p6SMLCJaSsg9G5SDCF8D9attYH6IpPymnXVvdb0uVMy97issY6hKxVJuqxeuzRyqQc/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/AVvXsEgO7DqJPmLY2jwslqpn9XiprPHHT9KIEamHs_X6AxonbWC9CA8YGgihlAi_qxA7dwybAb-ypVWIYoe5gmE8Fi7sW81KZ4ALMFZsnMq6e4WwUFvmRR_vvuTUULsM8vCu-ukGrIo3E6cG2Q/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;
}

 seterusnya, tekan "Ctrl+F" cari pula kod </body>

 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.

<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=BLOG ID ANDA&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>

 seterusnya adalah langkah akhir yang susah sikit. pergi kepada script template anda. tekan "Ctrl+F" cari  kod <b:includable id='comments' var='post'>


 8. selepas menjumpai kod tersebut, delete kod-kod yang bermula selepas kod <b:includable id='comments' var='post'> hingga sebelum kod </b:includable> (yang ini kena fahamkan bebetol ok)

 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>

 kemudian, copy kod yang telah siap di edit pada notepad ( rujuk langkah sebelum nya: 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>



 akhir sekali, klik PREVIEW. kalau tiada sebarang mesej error terpapar, klik Save.

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

ijka 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;
}

 credit to NESCAFE AIS