Menambahkan Style Unik untuk Kotak Komentar

Kali ini saya akan share tentang bagaimana menambahkan style atau merubah tampilan pada kotak komentar Blogspot.

Sebelum kita mulai:

1. Anda harus berhati-hati saat mengganti template Anda. 
2. Sebelum Anda membuat perubahan, Cadangkan/pulihkan template Anda dan simpan di drive anda terlebih dahulu. Ini untuk memudahkan anda jika terjadi kesalahan dalam pengeditan nanti.

Sekarang ikuti langkah-langkah dibawah ini untuk mengedit kotak komentar anda dengan tampilan yang berbeda.
1. Login ke dashboard Anda -> Desain--> Edit HTML 
2. Klik pada "Expand Template Widget"
3. Cari "Ctrl + F" dan cari kode berikut atau yang serupa:

• <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
         <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'>
       <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>
             </dl>

  Ganti kode atas dengan yang berikut ini:
  

<ol class='commentlist'>
        <b:loop values='data:post.comments' var='comment'>
          <b:if cond='data:comment.adminClass == data:post.adminClass'>
          <li class='comment odd'>
            <div class='comment-body'>
            <div class='comment-author vcard'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='32px' style='margin-bottom:-2px;' width='32px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <cite class='fn'>
              <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>
              </cite> <span class='says'>says:</span>
            </div>
            <div class='comment-meta commentmetadata'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </div>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p>
                <data:comment.body/>
                <span class='interaction-iframe-guide'/>
                </p>
            </b:if>
            </div>
          </li>
          <b:else/>
          <li class='comment even'>
            <div class='comment-body'>
            <div class='comment-author vcard'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='32px' style='margin-bottom:-2px;' width='32px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <cite class='fn'>
              <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>
              </cite> <span class='says'>says:</span>
            </div>
            <div class='comment-meta commentmetadata'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </div>

           <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p>
                <data:comment.body/>
               </p>
            </b:if>
            </div>

          </li>
          </b:if>
        </b:loop>
      </ol>

4. Berikutnya cari kode ]]> </ b: skin> dan paste kode 

    dibawah ini sebelum kode ]]> </ b: skin>:

/*----------------------------------------------------
          {--------}  Comment {--------}
----------------------------------------------------*/
#commentsbox {

margin-left:5px;
padding:10px;

}
/*----------------------------------------------------------
     {--------}  Comment Answer Box Title {--------}
-----------------------------------------------------------*/
h3#comments{
    font-weight: bold;
    font-size: 20px;
    padding: 0;
    margin: 0 0 15px 0;
    padding: 10px;
    display: block;
    background: #fff;
    border: 1px solid #DFDFDF;


}

/*----------------------------------------------------------
     {--------}  Comment Answer Box Ordered  {--------}
-----------------------------------------------------------*/
ol.commentlist {
 margin:0px 0 0;
 clear:both;
 overflow:hidden;
 list-style:none;


}
/*----------------------------------------------------------
     {--------}  Comment Answer Box  {--------}
-----------------------------------------------------------*/
ol.commentlist li {
 margin:5px 0;
 line-height:18px;
 padding:10px;
 border: 1px solid #dfdfdf;
        background:#fff;
      
}

ol.commentlist li:hover {
background: #fcf4e8;

}

/*---------------------------------------------------------------
     {--------}  Comment Answer Box List Author Fn {--------}
----------------------------------------------------------------*/
ol.commentlist li .comment-author .fn {
 }


/*----------------------------------------------------------
     {--------}  Comment Answer Box Cite Fn {--------}
-----------------------------------------------------------*/
cite.fn{
 color:#555;
 font-style:normal;
}

/*-----------------------------------------------------------------------------
     {--------}  Comment Answer Box Comment Author{--------}
-------------------------------------------------------------------------------*/
ol.commentlist li .comment-author {
 color:#555;
}

ol.commentlist li .comment-author:hover {
color: red;
}
/*----------------------------------------------------------------------------------
 {--------}  Comment Answer Box Comment Author Link A Visited{--------}
----------------------------------------------------------------------------------*/
ol.commentlist li .comment-author a:link,ol.commentlist li .comment-author a:visited{

 color: red;
 font-weight:bold;
 text-decoration:none !important;
}

/*-------------------------------------------------------------------------
     {--------}  Comment Answer Box Ordered List Avatar  {--------}
--------------------------------------------------------------------------*/
ol.commentlist li .comment-author .avatar{
 float:right;
 border:1px solid #413E45;
 background:#413E45;
 padding:2px;
}

/*--------------------------------------------------------------------
     {--------}  Comment Answer Box Ordered List Mata {--------}
---------------------------------------------------------------------*/
ol.commentlist li .comment-meta{
 font-size:10px;

}
/*--------------------------------------------------------------------
     {--------}  Comment Answer Box Ordered List Commentmata Data {--------}
---------------------------------------------------------------------*/
ol.commentlist li .comment-meta .commentmetadata{

 color:#000;
}
/*--------------------------------------------------------------------
     {--------}  Comment Answer Box Ordered List Mata A {--------}
---------------------------------------------------------------------*/
ol.commentlist li .comment-meta a {
 color:red;
 text-decoration:none !important;
}

/*------------------------------------------------------------------------
     {--------}  Comment Answer Box Ordered List Paragraph {--------}
--------------------------------------------------------------------------*/
ol.commentlist li p {
 line-height:22px;
 margin-top:5px;
 color:#999;
 font-size:12px;

}

/*----------------------------------------------------------------------
     {--------}  Comment Answer Box Avatar Image Container  {--------}
------------------------------------------------------------------------*/
.avatar-image-container {
        float:right;
        border: 1px solid #ddd;
        padding: 4px;
        height:48px;
        width:48px;
}
/*----------------------------------------------------------------------
     {--------}  Comment Answer Box Image Container Image  {--------}
-----------------------------------------------------------------------*/
.avatar-image-container img {
       background:url('#') no-  repeat;
       height:48px;
       width:48px;
}

/*----------------------------------------------------
          {--------}  Clearing  {--------}
----------------------------------------------------*/
.clearfix:after {
    content: ".";
    display:block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
 display: block;
}
/*----------------------------------------------------
          {--------}  Hides From IE Mac  {--------}
----------------------------------------------------*/
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/*----------------------------------------------------
          {--------}  Clear {--------}
----------------------------------------------------*/
.clear {
 clear: both;
}
/*----------------------------------------------------
          {--------}  No Clear  {--------}
----------------------------------------------------*/
.noclear {
 clear: none;
}

 5. Simpan template dan Anda sudah selesai.

NB:
Anda dapat mengubah latar belakang, ukuran perbatasan,warna dan pilihan lain pada tampilan kotak komentar anda dengan mengganti  kode-kode yang dapat anda temukan di langkah 4, sesuai keinginan Anda.