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 HTMLTick 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='&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>              <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>          </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='&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>

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 :




http://3.bp.blogspot.com/-7DwKRROV9l8/UAJIEBkZzjI/AAAAAAAACso/GGneKUnndf8/s1600/friends+.png



http://1.bp.blogspot.com/-Wxii8QoSXQY/UAJIFbzpviI/AAAAAAAACsw/eJr7msfon8E/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 .

8 comments:

Ana Hanaa Daud said...

Nice tutorial :) Lama dah tunggu tutorial ni. Ingat nak request, tapi Zaty dah buat. TQ ^_^

Atirah ★ said...

nice tuto . bnyk betul tuto kt sini . rajin la awkk :) Sy pnggil awk Raja Tuto k . hehe :)

✉ ¥ana Fauzi ✉ said...

NANTI SAYA TRY YER! !!:) TQ BUATKAN TUTO:D

Ika Zulaikha said...

saya nk try buat ni ye :)nice tutor awk

Ika Zulaikha said...

x pe kan kalau saya nak try tutor ni