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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFjU1Z2TdPVbjzUAdcBS8gWr1lgOeMN9TP_kFT-FcLx_mF0j4yhh2CKVwZ1DlKYFsaLP-lf730qfD21azIWuIFqKrNTxUxNnlkNriPmXy0yPvrIgVH__wLr9brVF3HX9PMrm20-IwomDU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRLhyphenhyphenkPvzF-OJFG0bQPMGQammX7b5jiPiPhHS8HQ5HhCgcQVEWIcKS2w8xHGnKAj-C0JutTFuOOySZZnvJSy7HrHu0gjjM0evQfBqnL53YsC_6KT08dgdIL1aNHO_duSxjnMFAY2I2roE/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 ? >< ! 

---

THANKS FOR READING. DROP YOUR COMMENT PLEASE?

---