29 January 2009

Different Styles for Author Comments

4xmo mukadimah panjang2x..
kali ni tuts kita iaitu nak buat different styles utk author comments

Mula2x anda harus pastikan yg comment blog anda dah pun di setkan "Show Comment"
bagaimana nak set???

  • Setting
  • Comment
  • "Show" Comment
*igt sebelum membuat apa-apa perubahan anda di minta buat backup template.

lets tuts begin.............

  • Layout
  • Edit HTML
  • Click pada kotak Expand Widget Template
  • ctrl+f untuk mencari perkataan "comments-block".
  • Selepas dah jumpa sila paste kan code yg telah di bold dan berwarna merah
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt 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/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

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

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

bila sudah selesai paste code seperti di atas
kita teruskan dgn buat style nya lak..

ctrl+f utk mencari perkataan "comment-body"
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
kemudian lepas dah jumpa..kita paste kan code yg bold +merah seperti di bawah:-
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.blog-author-comment {
margin:.25em 0 0
}
.blog-author-comment p {
margin:0 0 .75em;
paddinrg:5opx 10lpx;
bordcer:1px dotted #254117;
color:#000000;
background:#e56e94;
}

jika anda lihat ada padding kan..ianya adalah space around the text arr..5px utk atas dan bawah..
10px lak utk kiri dan kanan..jika xmahu ada background pun ok je..boleh buang..color tu adalah utk color utk font tulisan author..yg ni lah yg boleh kita bezakan..untuk membuat pilihan warna berserta codenya boleh la ke sini


Photobucket
cth yg telah di buat..


**entry ni di buat setelah di minta oleh Kak Reena yg comel..
(bukan bodek k..mmg kenyataan dia comel!!! xcaya p terjah arr blog dia)


Selamat Mencuba!!!


mood::bunny1:
Munirah Abd's Facebook profile

6 comments:

  1. sonok masuk blog kamoo
    bnyk benda leh belajar...

    (^_^)

    ♥Yanie Putrajaya♥
    *********************************

    ReplyDelete
  2. dasat la kak mun.
    memang dewa coding la.

    ReplyDelete
  3. akak nie fobia coding tau kekeke

    mama mya
    http://www.quefamili.com

    ReplyDelete
  4. huhu, pesal nama aku plak masuk situ, adoi

    ReplyDelete
  5. muah...muah...muah.....AKAK SAYANG MUN!!!!

    ReplyDelete

Dear readers,comments make me happy and make me smile!! Yes!! your comments will be moderated.Dont worry about that ok.. Its a procedure to kick out spammer and mosquitos.Thank you.

# NO SPAM OK!!!
# Comment is awaiting on moderation.
# No harsh word!!


Thanks for your comment!! *wink*