Mar 17, 2009

Memasang Nombor Pada Komen


Rentetan dari topik cara membezakan komen penulis dan pelawat, saudara Kriell telah meminta penulis mengajarnya cara untuk membuat nombor pada setiap komen yang ada. Tutorial ini sangat sesuai untuk digunakan di blog² yang mempunyai banyak komen kerana ia akan membuatkan komen anda kelihatan lebih menarik. Ayuh, kita belajar bersama.


1. Login ke Blogspot.

2. Pilih Layout - Edit HTML (Tanda kotak Expand Widget).

3. Download Full Template sebelum mengedit blog.

4. Cari kod <dl id='comments-block'>, kemudian tambahkan kod yang berwarna merah seperti di bawah.

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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/>

<span class='numberingcomments' style='float: right; font-size: 20px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>

5. Sekarang cari ]]></b:skin> dan tambahkan kod ini di atasnya.

.numberingcomments {
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -20px;
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}
.numberingcomments a:link, .numberingcomments a:visited {
color: #445566 !important;
text-decoration: none !important;
background:none;
}
.numberingcomments a:hover, .numberingcomments a:active {
color: #FF9933 !important;
text-decoration: none !important;
background:none;
}

6. Save template.

Siap. Untuk memastikan kod ini telah berjaya anda pasang, aktifkan semula topik anda yang mempunyai komen dan lihat hasilnya. Selamat mencuba.

Via : Fernandoo
Via : Marzuki


12 Comment

@LiYaNNuaR Tue Mar 17, 07:30:00 PM

nice tutorial...

umar_skyscooter Wed Mar 18, 12:12:00 AM

erm bagus tutorial ni tapi aku malas lagi nak try,hehehe

Eriyza Wed Mar 18, 12:34:00 AM

AliyaAnnuar : Thanx. :)

Eriyza Wed Mar 18, 12:37:00 AM

Umar Skyscooter : Cuba bila ghajin noo. :D

HuRuL_Aini Wed Mar 18, 08:40:00 AM

thanks for this tutorial...keep up the good work :)

Eriyza Wed Mar 18, 11:41:00 PM

Hurul Aini : U're welcome. :D

D@U$ Thu Mar 19, 11:41:00 AM

Salam Kak Eriy, Daus nak request cara nak buat code box...
Yang juki punya x kuar box pun...

KhairiL's Thu Mar 19, 10:56:00 PM

tengs sis
akhirnya setelah tukar template baru,
baru dpt guna tutorial ni
sbb aritu pny x support
=)

Eriyza Fri Mar 20, 12:28:00 AM

Daus : Ye ke?? Nanti cheq plak try kotak kod Juki tuh.

Eriyza Fri Mar 20, 12:29:00 AM

Khairil's : Okeh. Selamat mengedit template.

ZelL ThE gReaT ! Sat Mar 28, 05:25:00 PM

Dapat da, thnx miss :)

Eriyza Sat Mar 28, 07:38:00 PM

Zell The Great : Sesama.

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.