Iza Zaty: Tutorial - Kotak Komen Macam Zaty

* tutorial letak kotak komen + skali dgn perkataan kawan zaty/zaty .

Assalamualaikum .
ramai gile yg request suruh zaty buat tutorial kotak komen cm zaty ni .
hehe ,, sorry baru nk buat tuto hari ni .. ;P
busy semalam, takleh nk update blog langsung.
*bagi yg dh ade kotak komen , sila padam dulu ya code itu
okk, jom kita mulakan ! :)

1. Dashboard > Design > Edit HTML > Tick Expand Widget Template
* backup template skali, kalau x jadi nti boleh perbaiki.

2. tekan CTRL+F dan serach kan code :

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

3. bawah code no 2 tadi, mesti ade code mcm kt bawah ni ken :

<dt expr:class='"comment-author " + 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'> <data:comment.body/> <b:else/>  <data:comment.body/>  </b:if> </dd> <dd class='comment-footer'>  <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/>  </dd> <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'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </dd> <dd class='comment-footer'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </dd> </b:loop>

4. Padam kan semua code di atas. *JANGAN PADAM CODE </b:loop>
5. Gantikan code yg korang padam tadi dgn code di bawah :

<div expr:class='"author-comment " + 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'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </dd> <dd class='comment-footer'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </dd> </div>

ehh,ehh.. belum habis lagi .

6. tekan CTRL+F dan search code ]]></b:skin>

7. copy semua code dibawah dan paste kan di ATAS code ]]></b:skin>

.comment-footer{margin-bottom:0 !important;}.author-comment{background : #FFFFFF url(URL GAMBAR KAWAN) no-repeat right top ;padding:5px;margin-bottom:1.5em;border:3px solid #000000;border-radius:10px;}.author-comment.blog-author {background: #D8D8D8 url(URL GAMBAR OWNER) no-repeat right top;}

perlu di ubah :

Merah : background kotak komen kawan.
Biru : url gambar untuk kawan.
Oren : bentuk keliling border solid / dashed / dotted
Coklat : warna border
Hijau : background kotak komen owner
Purple : url gambar untuk owner

8. tekan SAVE :)

* code warna boleh cari di (SINI)

* URL gambar untuk kawan/owner zaty dh buat untuk
korang tadi :)) amek kt bawah ni k :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy2UqXJ-xCQMOj8IJLv08X4zf6HMkpWaPWG-gB3dmAVD3VFr_Tb-un8apIRiQla_9BpYmqUNYQNdIy2shqryFZdYslc8JP2dvqklZHGW431zOKumXGOxEasdLqAqvgBM4yPtNcPaPWDDIv/s1600/friends+.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVXE00SWSLQfL3Mtot78rI4QjCpj2cbW6wNK0nGuIr_pcRXs5BcCw7dpJtLtoRYTy7B0Oa3Mq1HL7pDtyZlP6aiVgPpDtGqK9EY-unAYFeMZncmWb7tWvQk79IcCzzog7zswzWvP5a89JK/s1600/owner+.png

# sape yg dh ikut tutorial ni, mohon KOMEN :)
wakaka, penat tauu . hehe
kbye, semoga tutorial ni berhasil .

Thank You sebab baca entry ni . Jangan lupa like dan komen .