Cara Sorokkan Comment Box

Salam Semua...
Saya nak share tentang cara nak sorokkan Comment dibahagian post supaya nampak lebih kemas.

Ok! kalau anda berminat nak buat follow semua step dibawah dengan betul...

1. Login ke Blogspot
2. Tekan Settings > Comments dan settingkan comment form seperti gambar dibawah

3. Klik Layout > Edit HTML > klik Expand Widget
Klik Download Full Template (Untuk Back-up template) ini penting!

4. Tekan CTRL+F untuk memudahkan anda mencari kod . Masukkan kod ]]></b:skin> kedalam kotak Find dan tekan Enter

5. Copy Kod dibawah dan Pastekan diatas atau sebelum kod ]]></b:skin>

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

*Kod diatas anda boleh customizekan sesuka hati anda... Anda boleh dapatkan kod warna disini.

6.Masukkan kod </head> kedalam kotak Find dan tekan Enter. Copy kod dibawah dan Pastekan sebelum atau diatas </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>

*Bahagian yang saya highlightkan dengan warna merah, anda boleh tukar dengan ayat yang anda suka...

7. Ini langkah yang terakhir...Sila rujuk kod dibawah. Perhatikan betul2 ya... Tambahkan kod yang saya highlightkan dengan warna merah... Kod yang warna hitam tu memang dah tersedia ada di dalam template anda.

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

*Untuk memudahkan pencarian saya sarankan anda masukkan kod <dl id='comments-block'> kedalam kotak Find dan tekan Enter. kemudian Pastekan Kod yang berwarna merah tadi diatas atau sebelum kod <dl id='comments-block'> (sila buat dengan teliti untuk mendapat hasil seperti yang diingini...=)

8. Kemudian anda boleh Save dan View...

Contoh hasilnya adalah seperti gambar berikut:

*Ini adalah semasa comment masih disorok

** Ini pulak gambaran selepas Comment dibuka... Menarik tak?

Bonus untuk anda!
Bahagian Click Here To See Comments dan Hide Back anda juga boleh gantikan dengan Icon, gambar ataupun Text yang anda generate sendiri dengan gantikan dengan kod berikut:

<img border='0' src='masukkan url anda disini'/>

-Kemudian lepas ganti semua ayat2 dengan kod yang saya berikan anda boleh Save dan View hasilnya... Wah! konpem cantik!

Contoh hasilnya adalah seperti gambar berikut...


Selamat Mencuba...=)

Kredit kepada:RojakStory

Whitey Note: Selepas mengambil tutorial ini. Sila Tinggalkan Comment anda ya... Terima Kasih..