Tuesday, February 21, 2012

Home » , , » Tutorial Customize Your Comments Box

Tutorial Customize Your Comments Box


Salam.

Actually dah ramai gila yang requested dekat I tutorial neh. I neh je yang tak sempat sempat nak buat tutorial neh. Sebenarnya sebab tutorial neh leceh sikit. Tapi hasilnya superb beb! Untuk korang yang nak try, boleh ikut tutorial yang I sediakan di bawah oke. Before that, sesiapa yang ada buat tutorial ini, sila DELETE dulu yek!. Sape tak delete, kalau tak jadik kang jangan salahkan I pulak. Meh preview sikit hasilnya. Zoom in!


Amacam? cun tak comments box blog I?

1) Dashboard - Design -  Edit HTML - Tick Expand Widget Templates
2) Tekan Ctrl+F carik code 
<b:loop values='data:post.comments' var='comment'>
3) Bawah code tu, ada lebih kurang code macam ni.
<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) Korang highlight code warna biru dan gantikan dengan code di bawah neh. Yang merah tuh korang jangan usik!
<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) Now korang carik code ni pulak.
]]></b:skin>
6) Then paste kan code bawah neh dekat ATAS code no (5) tuh.
.comment-footer{
margin-bottom:0 !important;
}
.author-comment{
background : #FFFFFF  url(http://i44.photobucket.com/albums/f23/nurul_izz/komen12.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://i44.photobucket.com/albums/f23/nurul_izz/komen11.png) no-repeat right top;
}
7) Preview dulu. Kalau takde sebarang error, korang SAVE je! Then korang check la blog comments box korang. Jadi ke tak? Surprisedddd!! :'P
Photobucket

Thanks for visiting my site.
Like and Share this entry if you think its very useful. And please do leave your comments below ya!
Love, ♥ Nurulchumel ♥

✿ Link for Blogwalking View ヅ

300 x 250
Pretty Blinking Hello Kitty
© Copyright 2009 - 2016 | Full Designed by ✿ Nurulchumel's Properties ヅ | All Rights Reserved™