CARA MEMBUAT WARNA KOTAK KOMENTAR ADMIN BLOG BERBEDA....

Baiklah buat sahabat Marfin, 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.. pada postingan yang lalu telah saya bahas mengenai CARA MENAMBAHKAN FUNGSI SCROLLING PADA KOTAK KOMENTAR dan sekarang mari kita mulai membahas langkah-langkah untuk mengubah tampilan kotak komentar admin blog ini.

Jadi.. Perhatikan & pahami langkah-langkahnya berikut ini :

 1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga..kan tinggal copy-paste lagi trus simpan & kembali seperti semula..

A. Untuk Kode HTML-nya...

3. Lalu cari "<data:comment.author/>"  atau "  <data:commentPostedByMsg/>   ".... ( tekan CTRL + F untuk pencarian)...

4. Jika sudah ketemu dan yakin sudah benar tempatnya... 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 dibawah ini setelah kode " </dd>  " ...

</b:if>

5. Lakukan persis 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'>

  
B. Untuk Kode CSS-nya...
6. 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  " ..ini kalau yang di template blog saya....kalau sudah ketemu maka kodenya seperti dibawah ini.....

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

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}

7. Yang perlu kamu lakukan hanya meng-Copy seluruh kode css .comment-body ini dan Paste-kan dibawahnya.. kemudian ubah namanya menjadi .comment-body-author ...lakukan seperti contoh dibawah ini...

..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;
}

Ket :
> Kode CSS yang saya kasih penjelasan dengan tanda kutip slash bintang ( /* .....   */ )... itu merupakan kode CSS tambahan... jadi Copy-Paste kan kode CSS tambahannya seperti contoh diatas jika kalau memang belum terdapat pada kode CSS di template blog kamu...

8. Jika semua langkah-langkah diatas sudah dijalankan dengan benar... Simpan Template & Refresh Blog kamu... dan lihatlah perubahan yang terjadi pada bagian kotak komentar....

... agak sedikit rumit ya....