Threaded Comment Versi Sembang Cyber

Pernahkah anda melihat ruangan komen di blog rakan-rakan anda yang tersusun kemas seperti di blog WordPress? Contohnya adalah seperti di gambar ini.

Buat pengetahuan anda. Ini adalah fungsi "Threaded Comment". Biasanya anda boleh lihat di blog-blog yang menggunakan platform WordPress. "Threaded Comment" ni mempunyai kelebihan, di mana kita tidak lagi perlu memasukkan fungsi "Reply to Comment" secara berasingan. Ini kerana di dalam tutorial ini sudah terdapat code untuk butang "Reply to Comment".

Coding bagi "Threaded Comment" ini telah diubahsuai oleh saya. Di mana saya telah menambahkan sedikit customization pada code CSS "Threaded Comment" ini. Tutorial asal bagi "Threaded Comment " ini adalah dari blog Mari Bina Blog.

Langkah-langkah pemasangan

Okay, sekarang kita teruskan dengan cara-cara untuk mengaplikasikan sistem "Threaded Comment" ke dalam blog.

Sila Log In / Sign In ke Dashboard anda.
Sila pilih Template > Edit HTML (Bagi mereka yang menggunakan interface baru) Selepas itu sila klik Proceed.
Sila pilih Design > Edit HTML (Bagi mereka yang menggunakan interface lama).
Sila tick pada bahagian "Expand Widget Template".
Sila cari code ]]></b:skin> dengan menggunakan button "Ctrl + F". Kemudian copy dan paste code di bawah ini sebelum code ]]></b:skin>.

CSS Code Threaded Comment:

#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: white;
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: #fff;
border: 1px solid #E4E4E4;
overflow: hidden;
-webkit-box-shadow: 0 0 10px #000000;
-webkit-border-radius: 5px;
}
.cm_entry_admin {
padding: 16px;
background: #0000FF;
border: 1px solid #E4E4E4;
overflow: hidden;
color: #fff;
text-align:justify;
font-weight:normal;
-webkit-box-shadow: 0 0 10px #000000;
-webkit-border-radius: 5px;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj377gYMmZOtXTq3z6LKJBVmriy7iTFJTOf9SQ5aQYeI2GaVF346oDExOF0FMMcrf4jwKRZFH_HRWAiPfqf8MLaxhpm4_rT-w7AEgJowtko7MrUZAJqq1VhijVls1W_3ARtcUqGyweVdyo/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;
color:#000;
}
.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #000;
}
.cm_entry p {
margin: 0;
font-size: 13px;
color: #000;
text-align:justify;
font-family:Segoe Print;
border: 1px solid #E4E4E4;
background:#fff;
padding:5px 5px 5px 5px;
-webkit-box-shadow: 0 0 10px #000000;
-webkit-border-radius: 5px;
}
.cm_entry_admin p {
margin: 0;
font-size: 13px;
color: #000;
text-align:justify;
font-family:Segoe Print;
border: 1px solid #E4E4E4;
background:#fff;
padding:5px 5px 5px 5px;
-webkit-box-shadow: 0 0 10px #000000;
-webkit-border-radius: 5px;
margin-top:5px;
}
.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;
}

Customize CSS Threaded Comment:

Kod warna yang berwarna biru itu adalah background bagi bahagian komen pengunjung ataupun pelawat blog.
Manakala Kod Warna yang berwarna pink itu pula adalah background bagi bahagian komen admin blog / blog author.

HTML Code Threaded Comment:

Okay yang di bawah ini adalah code HTML bagi "Threaded Comment". Sila cari code ini <b:includable id='comments' var='post'> dengan menggunakan button Ctrl + F di keyboard anda.

Selepas anda menjumpai code berkenaan, sila highlight-kan code yang berada di antara code <b:includable id='comments' var='post'> dengan code ini </b:includable>.

Sila tukarkan nombor id blog ini 8460098002243305226 dengan nombor id blog anda. Anda boleh dapatkan nombor id blog anda di bahagian atas url address browser anda. Anda boleh edit code di bawah ini di dalam word pad ataupun note pad untuk mengubah nombor id berkenaan. Sudah siap, barulah anda copy & paste code yang telah anda edit tadi ke bahagian edit html template.

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 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 class='cm_pagenavi' id='cm_page'/>
<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='"https://www.blogger.com/comment.g?blogID=8460098002243305226&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry_admin'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<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_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<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>
</dd>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>
<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>

Java Script Threaded Comment:

Langkah terakhir yang perlu anda lakukan adalah mencari code </body> ataupun </html>. Sila letakkan code di bawah ini sebelum code </body> ataupun </html>.

<script src='http://yourjavascript.com/71229340101/threaded-comment.js' type='text/javascript'/>

Selamat Mencuba & Jangan Mudah berputus asa. Sila "Try & Error".

Credit Original Tutorial By: Mari Bina Blog.
Credit Alternatif Java Script By: Artis Tutorial.
Credit CSS & HTML Code By: Ibu Aliya.

Pages