Wednesday, 13 June 2012

Comment Box Macam Anis

Assalammualaikum .
No story to tell, nak buat tutorial je . He he he .. lawa tak comment box Anis ni ?
Thanks kak Nurul yang comel sebab ajar ni :) . Hu hu ~ ..

Dashboard > Design > Edit Html > Tick Expand Widget Template

Ctrl+f atau f3, search kode ni .
<b:loop values='data:post.comments' var='comment'>
Kalau tak jumpe, lain template, lain coding nye ye ..
Okey, bawah kode di atas tu, ade tak kode 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>
Ade kan ? Cari betul-2 taw ! .
Gantikan yang warna biru tu dengan kode di bawah k . AMARAN (Yang warna merah 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>
Belum habis lagi tutorial ni, pastu, search kode ]]></b:skin> pulak .
Paste kode yang Anis bagi ni di ATAS kod ]]></b:skin>


 .comment-footer{
margin-bottom:0 !important;
}
.author-comment{
background : #999999  url(http://1.bp.blogspot.com/-G7kpu4mn4QA/T9iSZdOOYAI/AAAAAAAABUk/iwVWoUIEXvc/s1600/girl2.png) no-repeat right bottom ;
padding:5px;
margin-bottom:1.5em;
border:2px dashed #Ef1A7F;
border-radius:10px;
}
.author-comment.blog-author {
background: #Ef1A7F url(http://4.bp.blogspot.com/-w4mpZwAkUIY/T9iSVBMecHI/AAAAAAAABUc/q15IeeD6KlQ/s1600/dudu.png) no-repeat right bottom;
border:2px dashed #000000;
}
Merah : Kod warna boleh cari di sini
Biru : Url Gambar, Anis dah kasi freebies nye dah 

Preview dulu ! Kalau tak error SAVE je .
Menjadi tak ? Cun kan ? >< ! 

No comments: