Hide or Expand Post Comments

Para pembaca sekalian, sila BERI KOMEN yang BERMANFAAT selepas membaca entri ini.

Macam dah lama je kan aku tak tulis tutorial sejak aku sambung belajar kat MMU.hehe. Bukan apa. Aku sibuk gila dengan main Facebook.haha. and of course dengan tutorial and project yang menimbun atas meja aku ni. Ntah bila nak siap kan ..Then now aku curi la sikit masa tulis tutorial ni.

Tutorial yang aku maksudkan ialah mengembang dan mengempiskan komen . Kalau tak paham apa aku tulis ni sila la lihat contoh di setiap entri komen aku. Fungsi Hide and Expand Post Comments ni untuk tak nak bagi komen korang tu berjela-jela panjang kat bawah dan melambatkan loading blog ko tu.hehe. Tutorial kali ini diinspirasikan oleh iEn.

01. Login ke Dashboard.
02. Klik Layout > Edit HTML
03. Tick pada Expand Widget Templates
04. Cari code ini ]]></b:skin> dan copy=paste code berikut di atas ]]></b:skin> tadi.

#HideComments {
width: 230px;
font-size: 13px;
background: #F0F0F0;
border: 1px solid #cccccc;
font-weight: bold;
padding: 5px;
}

05. Cari code ini lak </head> dan copy-paste code berikut di bawah </head> tadi.

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click Here To See Comments";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Back";
}
}
</script>

06. Tambahkan code yang berwarna merah.

<div id='HideComments'>
<a href='javascript:toggle();' id='displayText'>Click Here To See Comments</a>
</div>
<div id="toggleText" style="display: none;">

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

</div>

07. Save template.

Cam ne? Menjadi tak tutorial kali ni? Kalau tak jadi sila cuba lagi. Must be sumthing wrong sumwhere masa korang nak copy-paste code dia ni.hehe.

-Selamat Mencuba-