Threaded Comments in Blogger

Threaded comment adalah satu fungsi dimana ianya akan memudahkan kita untuk membalas (reply) setiap comment yang diberikan oleh readers pada post tersebut.

Save script template sebagai backup. (penting)

Langkah 1
Log in blog => Dashboard => Layout => Edit HTML. Seterusnya tick pada kotak Expand Widget Templates.

Langkah 2
Dengan menggunakan keyboard,tekan Ctrl+F dan taip atau paste kod ]]></b:skin> pada ruang Find dan tekan Enter.

Langkah 3
Salin kod berwarna biru di bawah dan paste diatas atau sebelum kod ]]></b:skin> (rujuk langkah 2)

.comment-segment {

margin-top: 10px;
margin-right: 10px;

}
.comment-level-0 {

margin-left: 10px;

}
.comment-level-1 {

margin-left: 25px;

}
.comment-level-2 {

margin-left: 40px;

}
.comment-level-3 {

margin-left: 55px;

}
.comment-level-gt3 {

margin-left: 70px;

}
.blog-author-comment {

background-color: #e2eef2;
border: 1px solid #7296e2;
padding: 5px;

}
.blog-nonauthor-comment {

background-color: #f8f8f8;
border: 1px solid #dddddd;
padding: 5px;

}
.deleted-comment {

color: gray;
font-style: italic;

}
.delete-comment-icon {

background: url("http://www.blogblog.com/rounders3/icon_delete13.gif")
no-repeat;

}
.comment-time {

font-size: 80%;
margin: inherit;
padding-left: 10px;
padding-bottom: 10px;

}
.reply-guide {

background-color: #ffffff;
border: #076a93 1px dotted;
display: none;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 0.75em;
padding-top: 5px;
margin-right: 10px;
margin-bottom: 10px;

}
.reply-guide-header {

color: #076a93;
padding-top: 10px;

}
.reply-guide-list {

list-style: none;
padding-left: 2px;
margin-left: 2px;

}
.reply-guide-example {

font-size: 85%;
margin-right: 5px;
margin-bottom: 10px;
float: right;
border: 1px dotted #076a93;
padding: 5px;

}

Langkah 4
Dengan menggunakan keyboard, tekan Ctrl+F dan taip atau paste kod </head> pada ruang Find dan tekan Enter.
Langkah 5
Salin kod berwarna merah di bawah dan paste di bawah atau selepas kod </head> (rujuk langkah 4)

Langkah 6
Dengan menggunakan keyboard, tekan Ctrl+F dan taip atau paste kod <b:includable id='comments' var='post'> pada ruang Find dan tekan Enter.
Langkah 7
Highlightkan semua kod bermula dari kod <b:includable id='comments' var='post'> dan kemudian scroll ke bawah hingga anda bertemu dengan kod penutupnya </b:includable>
Contoh:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
......................................................................................
(Ini cuma sebahagian daripada kod yang dihighlightkan)
......................................................................................
<b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
</div>
</b:includable>

Langkah 8
Salin kod berwarna hijau di bawah dan paste pada notepad terlebih dahulu. Seterusnya, edit pada URL yang di bold dengan menggantikan dengan URL profile anda.

<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 == 1'> 1 <data:commentLabel/>:
<b:else/><data:post.numComments/><data:commentLabelPlural/>:
</b:if>
</h4>

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<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>
</p>

<b:loop values='data:post.comments' var='comment'>
<div style="display: none;" expr:id='"comment-body-" + data:comment.id' >
<data:comment.body/>
</div>
</b:loop>

<script type="text/javascript">
// USE THIS if YOU Have multiple Authors adding them in a comma separated form after removing the '//' from the next line
// var BLOG_AUTHORS = ['http://www.blogger.com/firstauthor', 'http://www.blogger.com/profile/secondauthor', 'http://www.blogger.com/profile/thirdauthor'];
// Use this if you have just one author like this blog:)
var BLOG_AUTHOR = 'masukkan url profile di sini';
var BLOG_POST_COMMENT_LINK = '<data:post.addCommentUrl/>';
var eCommentDelete = false;
var eAuthorUrl = '';
<b:loop values='data:post.comments' var='comment'>
eCommentDelete = false;
eAuthorUrl = '';
<b:if cond='data:comment.authorUrl'>
eAuthorUrl = "<data:comment.authorUrl/>";
</b:if>
<b:if cond='data:comment.isDeleted'>
eCommentDelete = true;
</b:if>
buildComment("<data:comment.author/>", eAuthorUrl,
"<data:comment.id/>", "<data:comment.timestamp/>", eCommentDelete,
"<data:comment.deleteUrl/>", "<data:top.deleteCommentMsg/>",
document.getElementById('comment-body-<data:comment.id/>').innerHTML);
</b:loop>
// <![CDATA[
var eCommentTemplate = '' +
'<div class="comment-segment comment-level-${COMMENT.LEVEL} ${BLOG.AUTHOR} ${COMMENT.DELETED.STYLE}" >' + '\n' +
' <a name="comment-${COMMENT.ID}"></a>' + '\n' +
' <span style="float: right; margin-right: 5px; " >' + '\n' +
' <a href="#" ' + '\n' +
' onclick="toggleElementDisplays(this, ' +
'[\'comment-${COMMENT.ID}-body\', \'comment-${COMMENT.ID}-footer\', \'reply-guide-${COMMENT.ID}\'], ' +
'[\'both\', \'both\', \'hide\']); return false;" >[hide]</a>' + '\n' +
' </span>' + '\n' +
' <span class="comment-author" >' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'<a href="${COMMENT.AUTHOR.URL}" rel="nofollow">' +
'${COMMENT.AUTHOR.URL.EXISTS.END}' +
'${COMMENT.AUTHOR.NAME}' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'</a>' +
'${COMMENT.AUTHOR.URL.EXISTS.END}</span>' + '\n' +
' said... ' + '\n' +
' <div id="comment-${COMMENT.ID}-body" class="comment-body" ><p>${COMMENT.BODY}</p></div>' + '\n' +
' <span class="comment-time">on ${COMMENT.TIMESTAMP}</span>' + '\n' +
' <div id="reply-guide-${COMMENT.ID}" class="reply-guide comment-level-0 " >' + '\n' +
' <span style="float: right;" ><a href="#" onclick="hideElement(\'reply-guide-${COMMENT.ID}\'); return false;" >[hide]</a></span>' + '\n' +
' <h4 class="reply-guide-header">How to Reply to this comment</h4>' + '\n' +
' <span>' + '\n' +
' To reply to this comment please ensure that <b>one</b> of the following lines: ' + '\n' +
' <span class="reply-guide-example" >' + '\n' +
' <b>Example:</b><br />' + '\n' +
' @${COMMENT.ID} <br />' + '\n' +
' My <b>first line</b> is one of the values <br />' + '\n' +
' shown on the left:) ' + '\n' +
' </span>' + '\n' +
' <ul class="reply-guide-list">' + '\n' +
'<li>@${COMMENT.ID}</li>' + '\n' +
'<li>@${COMMENT.AUTHOR.NAME}</li>' + '\n' +
' </ul>' + '\n' +
' is the <b>first line</b> of your comment. ' + '\n' +
' <br />' + '\n' +
' <a href="${BLOG.POST.COMMENT.LINK}"' + '\n' +
' >Click here to enter your reply</a>' + '\n' +
' </span>' + '\n' +
' </div>' + '\n' +
' <div id="comment-${COMMENT.ID}-footer" class="comment-footer">' + '\n' +
' <span><a ' +
'href="#" onclick="showElement(\'reply-guide-${COMMENT.ID}\'); return false;" >Reply</a></span> ' + '\n' +
' <span><a href="#comment-${COMMENT.ID}">Permalink</a></span> ' + '\n' +
' <span><a href="${COMMENT.DELETE.URL}" title="${COMMENT.DELETE.TEXT}" style="text-decoration: none;" ><span class="delete-comment-icon"> </span></a></span>' + '\n' +
' </div>' + '\n' +
'</div>' + '\n';
applyCommentTemplate(eCommentTemplate);
// ]]>
</script>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Langkah 9
Salin kod yang telah siap di edit itu dan paste atau gantikan diatas kod yang telah di highlightkan pada langkah 7. (rujuk langkah 7)
Akhir sekali klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.
Nota: kredit kepada maribinablog

My Blog

Threaded Comments in Blogger

4 Comments:

Post a Comment

Admin Control Panel

BANNER

FOLLOWERS