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 : Marzuki
12 Comment
nice tutorial...
erm bagus tutorial ni tapi aku malas lagi nak try,hehehe
AliyaAnnuar : Thanx. :)
Umar Skyscooter : Cuba bila ghajin noo. :D
thanks for this tutorial...keep up the good work :)
Hurul Aini : U're welcome. :D
Salam Kak Eriy, Daus nak request cara nak buat code box...
Yang juki punya x kuar box pun...
tengs sis
akhirnya setelah tukar template baru,
baru dpt guna tutorial ni
sbb aritu pny x support
=)
Daus : Ye ke?? Nanti cheq plak try kotak kod Juki tuh.
Khairil's : Okeh. Selamat mengedit template.
Dapat da, thnx miss :)
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.