Tutorial Comment Box Macam Manja

haa. . comel tak? nak buat tak macam nie?ok2. . ikut step kat bawah ok?

1) Dashboard > Design > Edit HMTL > Tick Expand Widget Templates.

2) Korang tekan CTRL+F atau F3 then cari code kat bawah:

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

3) Then korank scroll ke bawah sikit n korank akan jumpe code macam kat bawah

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

              <b:if cond='data:comment.favicon'>

                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

              </b:if>

              <a expr:name='data:comment.anchorName'/>

              <b:if cond='data:blog.enabledCommentProfileImages'>

                <data:comment.authorAvatarImage/>

              </b:if>

              <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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

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

4) Padam code yang korank jumpe tu
5)Pastu korank copy code kat bawah sebagai ganti kepada code yang korank dah padam tu. . 

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

<div expr:class='&quot;author-comment &quot; + 

data:comment.authorClass'>

            <dt class='comment-author' expr:id='data:comment.anchorName'>

              <b:if cond='data:comment.favicon'>

                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

              </b:if>

              <a expr:name='data:comment.anchorName'/>

              <b:if cond='data:blog.enabledCommentProfileImages'>

                <data:comment.authorAvatarImage/>

              </b:if>

              <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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

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

5) Sekarang, cari code ni pulak :

 ]]></b:skin

6) Copy code dibawah dan paste dibahagian atas code ]]></b:skin

.comment-footer{

margin-bottom:0 !important;

}

.author-comment{

background : #FFFFFF url(url gambar kawan korank) no-repeat right top ;

padding:5px;

margin-bottom:1.5em;

border:2px solid #000000;

border-radius:10px;

}

.author-comment.blog-author {

background: #D8D8D8 url(url gambar tuan blog) no-repeat right top;

}

7) Preview dulu okeyh?kalau da jadi Save jer


P/S:
A> Background comment box kawan korank. . boleyh cari disini
A> Tebal border comment box. . boleyh tukar
A> Boleyh tukar kepada solid/dashed/dotted
A > warna border
A > Background comment box korank. . boleyh cari disini
A > Url gambar kawan korank n tuan blog,korank leyh amek kat bawah

Hijau

Taiko blog

http://i1182.photobucket.com/albums/x450/Cyunk_Nor/TAIKOBLOG.png

Kawan Saya

http://i1182.photobucket.com/albums/x450/Cyunk_Nor/KAWANpng.png

Merah

Taiko Blog

http://i1182.photobucket.com/albums/x450/Cyunk_Nor/F1.png

Kawan Saya

http://i1182.photobucket.com/albums/x450/Cyunk_Nor/F2.png

Biru

Taiko Blog

http://i1182.photobucket.com/albums/x450/Cyunk_Nor/F4.png

Kawan Saya

http://i1182.photobucket.com/albums/x450/Cyunk_Nor/f3.png

SELAMAT MENCUBA!!!