Membuat Warna Kotak Komentar Admin Berbeda Dengan Pengunjung

Untuk membuat tampilan kotak komentar admin blog berbeda dengan kotak  komentar pengunjung blog. Dalam hal ini warna latar  dan border kotak komentarnya yang kita modifikasi. Sekarang mari kita mulai membahas langkah-langkah untuk mengubah tampilan kotak komentar admin blog ini.

• Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget ).
• Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan untuk jaga-jaga. Kalau terjadi kesalahan kan tinggal copy-paste lagi trus simpan & kembali seperti semula. (hehehe)
• Cari kode CSS untuk comment-body . Ini biasanya terletak dibagian atas dari widget template blog.. cari kode css seperti ini "  .comment-body  " atau "  #comments-block .comment-body  "
• Copy seluruh kode css ".comment-body "ini dan Paste-kan dibawahnya.. kemudian ubah namanya menjadi ".comment-body-author "

.comment-body {
  font-size:100%;
  font-weight:normal;
  color:black;
}

.comment-body-author {
margin:0px;
padding:5px;
color:#000000;                   /* ini untuk mengubah warna huruf */
background:#F77D40;        /* ini untuk mengubah warna latar */
border: 3px solid #CCC;     /* ini untuk mengubah warna bingkai */
border-radius:7px;               /* ini untuk membuat bingkai */
-moz-border-radius:7px;     /* ini untuk membuat lingkaran ditiap sisi bingkai */
-webkit-border-radius:7px;
}

Atau seperti dibawah ini... kalau di template blog saya....

#comments-block .comment-body{
border-left:1px solid #C6D09D;
border-right:1px solid #C6D09D;
margin-left:0;
margin-right:20px;
padding:7px}

#comments-block .comment-body-author {
margin-left:0;
margin-right:20px;
padding:7px;
color:#000000;                     /* ini untuk mengubah warna huruf */
background:#F6FA84;         /* ini untuk mengubah warna latar */
border: 1px solid #CCC;      /* ini untuk mengubah warna bingkai */
border-radius:7px;                /* ini untuk membuat bingkai */
-moz-border-radius:7px;       /* ini untuk membuat lingkaran ditiap sisi bingkai */
-webkit-border-radius:7px;
}

• Kemudian cari "<data:comment.author/>"  atau "  <data:commentPostedByMsg/>   " (seperti biasa tekan CTRL + F untuk pencarian). Jika sudah ketemu lalu Copy kode html dibawah ini dan Paste-kan sesudah kode "</dt>"

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

•  Dan... cari lagi kode html "  <data:comment.body/>  " dan tambahkan kode </b:if>  setelah kode " </dd>   " .
• Lakukan seperti contoh di bawah ini : 

<data:comment.author/>

              </b:if>
              <data:commentPostedByMsg/>
            </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
   <dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' 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/>
                  <span class='interaction-iframe-guide'/>
                </p>
              </b:if>
            </dd>
</b:if>

 <dd class='comment-footer'>
              <span class='comment-timestamp'>

Artikel Yang Terkait...!!!