Cara Membuat Kotak Komentar Admin Berbeda Warna Dengan Pengunjung

Selamat datang bagi para pembaca baru dan para pembaca setia saya, pada kesempatan kali ini saya akan membuat postingan tentang bagaimana cara membuat kotak komentar admin berbeda warna dengan pengunjung.

Mau kan?mudah kok. Teman-teman cukup bermain dengan sedikit kode-kode html, tidak perlu belajar khusus kok, karena saya juga bukan ahli kode html..hehehe..

Sudah siap ? berikut ini caranya : 

1. Masuk ke account blogger kamu dan masuk ke rancangan lalu klik "edit html".
   
2. Peringatan ! Hal pertama yang harus kamu lakukan adalah mendownload template kamu yang sekarang, supaya kalau kamu gagal, kamu masih bisa mendownload kode html kamu yang belum ter-edit.
   
3. Centang "Expand Template Widget".
   
   
4. Cari kode ini ]]></b:skin> , mencari dengan cara CTRL + F
5. Kalau sudah ditemukan,  silahkan copy kode di bawah ini, dan paste tepat  di atas ]]></b:skin> sudah
   
   Copy kode di bawah ini :
   
   
   /* ---------------
   

   Admin Comment

   ---------------------------------- */

   .comment-body-author {

   background:#66FFCC;

   border:1px solid #999;

   border-left:1px solid #FFF;

   border-right:1px solid #FFF;

   margin-left:0;

   margin-right:20px;

   padding:7px;

   color:#ffffff;

   width: 600px;

   }
   
   Paste tepat di atas ]]></b:skin> , sampai jadi seperti ini:
   
   
   /* ---------------
   

   Admin Comment

   ---------------------------------- */

   .comment-body-author {

   background:#66FFCC;

   border:1px solid #999;

   border-left:1px solid #FFF;

   border-right:1px solid #FFF;

   margin-left:0;

   margin-right:20px;

   padding:7px;

   color:#ffffff;

   width: 600px;

   }
   ]]></b:skin>
   
   NB : Tulisan yang block, background bisa dirubah-rubah menggunakan kode html warna, sesuai dengan warna yang kamu sukai, untuk melihat warna klik di sini. Dengan width/lebar bisa diubah sesuai dengan lebar kotak komentar kamu (dikira-kira saja).
   
   
6. Setelah itu cari kode di bawah ini atau yang menyerupai
   
   
   <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/>               
                   <b:else/>
                   <p>
                     <data:comment.body/>
                   </p>
                 </b:if>
               </dd>
   
   Kalau sudah ditemukan, copy kode di bawah ini :
   
   
   <b:if cond='data:comment.author == data:post.author'>

   <dd class='comment-body-author'>

   <p><data:comment.body/></p>

   </dd>

   <b:else/>
   
   dan paste di atas kode yang telah kita temukan, dan jangan lupa menambah kode </b:if> , sehingga akan jadi seperti dibawah ini :
   
   
   <b:if cond='data:comment.author == data:post.author'>
   

   <dd class='comment-body-author'>

   <p><data:comment.body/></p>

   </dd>

   <b:else/>
   <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/>               
                <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
           </b:if>
   
   
   Setelah selesai PRATINJAU terlebih dahulu, bagaimana ? jika hasilnya sudah memuaskan, SIMPAN TEMPLATE.
   
7. Selamat mencoba dan semoga berhasil. Ciaooo