Sorokkan Komen (blogspot)

Ada reader tanya aku kat Fan Page Rojakstory, macam mana nak sorokkan kotak komen. Ha! Itu gunanya ada Fan Page tu. Untuk senang aku baca soalan korang instead of Formspring atau by e-mail. Sebab aku MALAS nak buka e-mail atau Formspring ok. Entah apa lah fungsinya Contact Me tu kan. Mesti ada yang cakap macam tu. Maaf aku tak ada jawapan untuk itu.haha.

Baiklah. Tutorial ini hanya untuk blogspot yang memakai embedded comments. Kalau pop up pun boleh tapi kotak komen akan hilang. ;). Btw, trick ni tak jalan kat blog yang pakai comment form dari third party contohnya Disqus Comment yang slow nak loading tu!

Tutorial ni aku dapat dari Teratak Muncet. Template blog ni pun aku cekau dari dia dan dengan SUKA SUKInya aku edit jadi theme lollipop.haha.

01. Dashboard > Layout > Edit HTML > TICK EXPAND WIDGET

02. Cari code ini: ]]></b:skin> dan copy paste code berikut kat bawah ]]></b:skin> tadi tu.

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

p/s: code atas ni boleh edit. Suka hati lah nak tukar kaler background ke. Tukar font size ke. Up to u :)

03. Letakkan code berikut kat sebelum </head>

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

p/s: yang di-boldkan dengan kaler merah tu kau boleh tukar ke ayat lain :D

*Apabila komen disorokkan

*Apabila komen di-expand

04. Ni langkah terakhir. Rujuk code kat bawah ni. Yang berwarna merah kau kena tambah. Yang berwarna hitam tu code yang memang dah ada dalam blog kau tu. Tambah code merah tu ikut code kat bawah ni tahu. p/s: coding kat bawah hanya ada pada coding minima template. sorry.

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

05. Save template.

So, menjadi tak? Leave me a feedback ok :DD