Maksud dari judul di atas adalah kita akan memberi warna serta border pada kolom komentar admin sehingga pengunjung dapat dengan mudah membedakan mana komentar admin dan mana komentar pengunjung lain. Warna kotak komentar yang berbeda ini akan terjadi saat kita berkomentar jika kita selaku admin blog telah sign in di Blogger. Contohnya seperti kotak komentar admin di blog ini yang terlihat berbeda dengan komentar lainnya.

Bila tertarik untuk mengaplikasikan trik ini pada template blog Sobat, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Sobat.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang di Expand Template Widget.

5. Cari kode ]]></b:skin>. Tekan Ctrl + F lalu isikan kode untuk mempercepat pencarian.

6. Copy kode di bawah ini lalu paste di atas kode tersebut.

.comment-body-author {
background: #fee6e6; /* Warna Background */
border:2px dotted #d31111; /*Border*/
margin:0;
padding:0 0 0 0px;
}
  • #fee6e6 merupakan warna untuk latar belakang, silakan ganti kode warnanya untuk mengubah warnanya.
  • 2px dotted #d31111 adalah border style dot dengan ketebalan 2 piksel dan berwarna #d31111. Silakan diubah sesuai keinginan Sobat.
7. Cari kode seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><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'>

8. Tambahkan kode:
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
di bawah kode:
<data:commentPostedByMsg/>  
          </dt>
dan kode </b:if> di bawah kode:
<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>
sehingga hasilnya menjadi seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
            <b:else/>
              <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 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>
</b:if>
          <dd class='comment-footer'>

9. Klik tombol SIMPAN TEMPLATE.

29 Comments

  1. hemm keren2 gan,, tpi klo backgraudnya bukan warna gmn..?? klo punyaku klo gk salah backgraunnya gambar..?

    ow ya untuk memajakun.. atau jarak admin sma komnttr berbeda gmn..??

    sukses dah...

    ReplyDelete
  2. @ubae Keren juga tuh kalau backgroundnya gambar

    ReplyDelete
  3. tak coba komentar dulu ya

    ReplyDelete
  4. kalo utk ukuran fonts bisa nggak sob.. misal komentar pengunjung mau saia kasih 12px.. n' komentar admin 14px ... ??? thank's b4. . .

    ReplyDelete
  5. @Shinobi Blog Utk komentar admin: silakan tambahkan kode font-size:14px; sebelum "}" pd langkah no. 6. Utk komentar pengunjung: cari kode sprt .comment-body{padding-left:0px;color:#333} lalu tambahkan kode font-size:12px; sehingga mjd sprt .comment-body{font-size:12px;padding-left:0px;color:#333}

    ReplyDelete
  6. Gak bewrhasil gan, gak berubah...hehe

    ReplyDelete
  7. @azuliaa Mungkin da yang kurang tepat dengan kode-kodenya gan..

    ReplyDelete
  8. sangat bermanfaat.makash infonya..

    ReplyDelete
  9. makasih bos..langsung dicoba..

    ReplyDelete
  10. @infonetmu & @sabarmuanas Sama-sama.. semoga berhasil ya..

    ReplyDelete
  11. Alhamdulillah berhasil mas.Terima kasih atas berbagi ilmunya

    ReplyDelete
  12. @Web MK Selamat mas. Terima kasih kembali..

    ReplyDelete
  13. kalo hanya warna font yg ingin diganti, gimana gan?

    ReplyDelete
  14. @blog bebas Silakan hapus kode
    background: #fee6e6; /* Warna Background */
    border:2px dotted #d31111; /*Border*/
    margin:0;
    padding:0 0 0 0px;
    pada langkah no. 6, kemudian ganti dengan kode color:#FF0000;
    #FF0000 merupakan kode untuk warna merah, silakan diganti dengan kode sesuai warna keinginan Agan.

    ReplyDelete
  15. ane udh coba sob...berhasil sob...terima kasih

    ReplyDelete
  16. mohon bimbingan ,, blog baru dan mohon dukungan nya

    ReplyDelete
  17. Kok diblog saya ga bisa ya gan... apa ada yang salah...????

    ReplyDelete
  18. @Serambi Mungkin aja ada yg salah gan

    ReplyDelete
  19. meski terlihat mudah tetapi sangat sulit untuk di praktekkan terutama buat pemula seperti saya ini. Tapi dengan mencoba hingga berulang kali ... mungkin akan mendapatkan hasil yang maksimal sesuai tutorial diatas . Tq ya....

    ReplyDelete
  20. @zodiak Jangan takut untuk mencoba.. nanti lama-lama juga bisa..

    ReplyDelete
  21. Mantap kk ....
    Keren Infonya ,.. ngga Nyesel aQ Follow nii Blog, .. Bermanfaat ..
    makasii kk Info'y ..
    Follow balik iaa .. hehe
    www.dindaphobia.com
    ------------------.
    best regard,

    ReplyDelete
  22. sy dah coba 3 x bro tp ko' gk bisa2 yaa..???

    ReplyDelete
  23. Hallo Bro.konsul nih. template saya ga ada koda yang seperti ini" . gimana bro caranya. tolong kasih tau saya yah. makasih sebelumnya.

    ReplyDelete
  24. om, backgroundnya bisa di ganti dengan gambar kita sendiri gak?

    ReplyDelete

Post a Comment

Previous Post Next Post