Bina box pada ruang comment

Akhirnya berjaya gak saya buat box pada ruang comment pada hari ini (19-9-2008).Idea ni datang beberapa hari sebelum ini. Dengan itu, pada pagi yang bersemangat ini saya cuba beberapa kali utk buat box ini dan memahami code yang ada dalam blogspot.so saya nak kongsi dengan anda semua. Tutorial untuk buat box ini ialah :



1. Login-> Layout->edit HTML->Tick Expand Widget Templates.

2. Pertama sekali anda perlu buat code utk css dahulu dan letakkan code css ini sebelum code ]]></b:skin>

.codeboxRed{
margin: 10px 42px 10px 0;
padding: 0 10px 10px 10px;
border: 2px dashed #CC0000;
background-color: #F7CBCA;
}

3. Seterusnya cari code dan letakkan code di bawah ini di bawah code
<b:loop values="data:post.comments" var="comment">

<div class="codeboxRed">



3. kemudian cari code bagi penutup loop code diatas iaitu
</b:loop>< dan letakkan code ini </div> sebelum code

</b:loop>

Kemudian simpan dan lihat hasilnya.

code penuh

<b:loop values='data:post.comments' var='comment'>
<div class='codeboxRed'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<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>
</div>
</b:loop>

Code yang warna merah merupakan code penambahan.

Anda boleh buat style box sendiri dan mengubahnya mengikut citarasa pada code css anda.

selamat mencuba :)