Monday, August 09, 2010

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, mari membahas langkah-langkah untuk mengubah tampilan kotak komentar admin seperti di blog saya ini.



Langkah-langkahnya sbb :

 1. Login ke Blogger > Rancangan > Edit HTML > Edit Template, centang expand template widget.

2. Copas dahulu seluruh kode HTML template blog kamu ke dalam Notepad dan simpan.

3. Cari dengan Ctrl F "<data:comment.author/>"  atau "<data:commentPostedByMsg/>".

4. Lalu copy kode html dibawah ini dan paste 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/>

Kemudian cari 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'>
  
6. Cari kode CSS untuk comment-body, seperti ini ".comment-body" atau " #comments-block .comment-body" (ini kalau yang di template blog saya), kodenya seperti dibawah ini.

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


atau seperti dibawah ini 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. Copy seluruh kode css .comment-body ini dan paste 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 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;                         -- warna huruf
background:#F6FA84;             -- warna latar
border: 1px solid #CCC;          -- warna bingkai
border-radius:7px;                    -- bingkai
-moz-border-radius:7px;          -- membuat lingkaran ditiap sisi bingkai
-webkit-border-radius:7px;
}
Ket :
Kode CSS dengan tanda bold merupakan kode CSS tambahan, jadi copas kode CSS tambahannya seperti contoh diatas jika kalau memang belum terdapat pada kode CSS di template blognya.


8. Simpan template & reload blog dan lihatlah perubahan yang terjadi pada bagian kotak komentar.


Selamat Mencoba.