07 August 2010

Tutorial Highlight Author's Comment

Otai-otai yang rajin mengomen, kekeke! Tutorial Credit to Anshul.

Kelebihan highlight comment author ialah readers boleh bezakan comment author dengan comment readers dengan senang. Hehe! Selain itu, nampak sweet kan? (Buang tabiat!)

Stepsnya:

1. Login Blogger. Pergi ke DASHBOARD > DESIGN > EDIT HTML. Click EXPAND WIDGET TEMPLATES box.

2. Cari code ]]></b:skin>

3. Copy code dibawah dan letakkan just before code di Langkah 2.

.comment-body-author {
background: #ffffff;
border: 2px solid #666666;
padding: 5px;
}

4. Tukarkan #ffffff dengan code warna pilihan atau tukarkan semua line warna merah itu dengan background: url(PUT_YOUR_IMAGE_URL_HERE); jika you all mahu letak image sebagai background pada kotak comment author. Jenis border, boleh diubah, try ubah border solid kepada dotted and dashed, pilih mana yang you all suka.

5. Cari code <dd class='comment-body'>

6. Copy code dibawah dan letakkan just before code di Langkah 5.


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

7. Cari code <dd class='comment-footer'>

8. Copy code </b:if> dan letakkan just before code di Langkah 7.

Pastikan code berwarna merah diantara code yang berwarna biru. Code you all sepatutnya lebih kurang macam ni.



<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='comment-body-author'>
<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>

9. Save template!



Azura: Saya harap you all dapat buat, need help, just leave your question at the comment box. Jangan lupa backup template before buat any changes. 
MSN Onion Emoticons
Such A Peaceful Day

4 Sweet Roses!:

oredi...thanks to this tutorial...=)

@♥ Baby Yats ♥~Yippie, happy owh sa sis dapat buat tutorial ni, wink wink! :)

@Zanna~Yeah! Harap2 tiada masalah ya. :)

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More