Tutorial Cantikkan Kotak Komen

Hye... iema nax tunjukkan cara untuk cantikkan kotak komen macam kat blog iema jom follow tutorial nie k ^^

 P/S : nax copy, highlight dan guna ctrl + c

 Dashboard -> Templates -> Edit HTML -> tick Expand Widget Template  ctrl + f, cari kod nie

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

 dan yang nie jugax

</b:loop>

 korang akan jumpe keseluruhan macam nie

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

 selain kod merah toe korang delete dan gantikan dengan kod nie

 <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 class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=6704232620769776681&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img alt='Reply To This Comment'/> </a> </span> </span> </dd> </div>

 ctrl + f, cari kod nie pulax

]]></b:skin> 

 copy dan paste kod nie di atas kod tadi

.comment-footer{ margin-bottom:0 !important; } .author-comment{ background : #FFFFFF url(url image untuk kawan) no-repeat right top; padding:5px; margin-bottom:1.5em; border:3px solid #A31947; border-radius:10px; } .author-comment.blog-author { background: #FFFFFF url(url image untuk owner blog) no-repeat right top; padding:5px; margin-bottom:1.5em; border:3px solid #FF5CAD; border-radius:10px; }

* color oren = untuk background komen kawan korang * color kuning = untuk background komen korang * color ungu = border untuk komen kawan korang * color biru = border untuk komen korang
 dah siap, korang preview dulu... tak ade pape error, boleh la save
selamat mencuba 

Tweet