Beza Komen Tuan Blog dgn Visitor | Tutorial

Straight to the point, tutorial ini diminta oleh Adik Izzah.Contohnya seperti gambar diatas ye?

Tutorial agak susah sikit, better anda backup dulu template anda.Sebarang kerosakan template atas tanggunggan diri sendiri ok :D

Now! start :

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

2) Korang tekan CTRL+F, cari code bawah ini :

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

3) Okay, bawah code tu kan ada code macam ni atau lebih kurang kan? :

<b:loop values='data:post.comments' var='comment'>            <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:loop>

4) **CODE WARNA KELABU JANGAN SENTUH!**Highlight code warna BIRU tu dan gantikan dengan code ni : 

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

5) Jangan pening tau! Sekarang cari code bawah ini :

]]></b:skin>

6) Code bawah ini, korang pastekan kat ATAS code "]]></b:skin>"

.comment-footer{margin-bottom:0 !important;}.author-comment{background : #FFFFFF  url(http://i1101.photobucket.com/albums/g432/fahtehaa/vistor1.png) no-repeat right top ;padding:5px;margin-bottom:1.5em;border:1px solid #FFFFFF;border-radius:10px;}.author-comment.blog-author {background: #D8D8D8 url(http://i1101.photobucket.com/albums/g432/fahtehaa/tuanblog1.png) no-repeat right top;}

Panduan warna :

TEHAA : Tukar warna kesukaan anda untuk background komen anda dan visitor di entri anda.

TEHAA : Gambar menunjukkan visitor anda, ambil tehaa punya.Make sure kredit.

TEHAA : Gambar menunjukkan anda sebagai tuan blog, ambil tehaa punya.Make sure kredit.

TEHAA : Ketebalan border.

TEHAA : Tukar sama ada Solid/Dotted/Dashed.

TEHAA : Warna Border.

7- Preview blog anda, takde error.Anda boleh save :D

SELAMAT MENCUBA!!