Cara Membuat Warna Komentar Admin Berbeda

Thanks telah berkunjung...

Suatu ketika teman-teman main2 ke suatu blog dan ingin memosting komen, pas lagi pengen mosting komen kok ngelihat ada warna yang berbeda yaaa...? Apanya...itunya lho warna dinding komennya ada yang berbeda, gak seperti warna dinding komen yang lain (ternyata stelah diintip2, ternyata yg punya komen tersebut adalah admin alias server alias empunya blog), wah gmana ne cara buat yg seperti itu...?.

Nah, itu yg ingin kita bahas di dalam postingan kali ini. Kalau teman-teman bertanya apa manfaat membuat warna admin berbeda, jawabannya ya jelas buat mbedain antara komen pengunjung dan admin. Dengan begitu mungkin ada yang pernah mosting komen berupa keluhan atau pertanyaan, maka nanti langsung tahu tuh kalau si admin sudah menjawab (dari sisi warna komen yg berbeda), dgn begitu mempermudah para pengunjung menemukan komen admin, tanpa harus meniliknya satu persatu (Nb: untuk memosting komen, Admin harus dalam keadaan Online/login Blogger), lanjuuutt.....

Cara bikinnya simpel, ikuti langkah2 berikut

1. Login ke blogger >> Tata Letak >> Edit HTML

2. Jangan lupa centang kotak "expand widget template"

3. Lalu cari kode: ]]></b:skin> dan pastekan kode berikut di atasnya...

.comment-body-author {
background: #CCCCCC;
border:1px dotted #FF6600;
margin:0;
padding:0 0 0 20px;
}




Ket:

Warna= Adalah warna background kotak komen [cari kode warna di sini]
Warna= Itu adalah border alias garis tepi, semakin besar nilai border maka semakin tebal. Bagi teman-teman yg gak senang garis tepi, maka 1px bisa diubah menjadi 0px
Warna= kalau yang itu adalah warna border/gris tepi [cari kode warna di sini]


4. Selanjutnya carilah kode: <data:commentPostedByMsg/>

5. Nah kalau dah ketemu, perhatikan kode berikut


<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'>
<span class='comment-timestamp'>



ALTERNATIF LAIN: Kalau tidak ketemu kode <data:commentPostedByMsg/> maka langsung saja cari kode <dd class='comment-body'>, selanjutnya tinggal di tambah kode warna lumut di atasnya, dan jangan lupa di tutup bagian akhir dgn kode </b:if> ==> persis contoh di atas. (lihat contoh di atas dgn baik2 yaaa...)


6. Sudah memperhatikannya baik2? Kalau begitu tugasnya teman-teman hanya menambahkan kode yang berwarna lumut ke dalam kode seperti di atas (Ingat, kode ijo dan hitam sudah ada di dalam template-nya teman-teman, sedangkan yg lumut adlh kode yg perlu ditambahi)

7. Seperti biasa, simpan hasil kerjaannya teman2. Dah itu coba komen sendiri di kotak komen masing2



Ngomong2 admin blog ini menggunakan trik ini juga nggak ya...?

Jawabannya YA.

Tapi kok warna Adminnya gak kelihatan beda?

Hahaha, itu karena background-nya saya atur jadi warna putih, alias kalau dikode-in jadi [#FFFFFF], walau putih background-nya namun komen saya (empunya/admin) tetap tampil beda dengan adanya border/garis tepi yang super tebal itu (kalau teman-teman tertarik buat bikin seperti admin blog ini monggo, yang penting untuk warna background, tebal garis tepi serta warnanya kuncinya ada di langkah.3, lihat ke atas dunk), dah dulu ya...dah adzan tuh...^


Nb: untuk memosting komen, Admin harus dalam keadaan Online/login Blogger




Semoga Bermanfaat []

Tags: cara membuat warna komentar admin berbeda, membuat highlight author comment, membuat komen admin beda, cara edit template komentar admin beda






Bagikan informasi ini ke teman-teman sobat

Postingan menarik lainnya...



44 comments:

"Terima kasih untuk tidak spam di sini"

  1. TES 123: Ne bagi teman-teman yang ingin liat tampilan komen admin, bagaimana keren kan? Kotak komen admin blog ini berwarna putih (#FFFFFF), dan berborder 3px. Ini hanya sekedar ngetes moga tutorial ini bermanfaat [] :29

    ReplyDelete
  2. Hm^ - hati2, sabar, dan lebih jeli lagi sob! Pasti bisa :10

    ReplyDelete
  3. Ga ngaruh bro.. ud gw ikutin persis bgt..

    ReplyDelete
  4. Coba trus aj sob, masalahnya gak semua kode template sama, mungkin sudah kena edit sebelumnya. Oleh karena itu nyoba satu persatu, CATATAN:
    Jangan sampai kode </b:if> salah ditempatkan, krn itu bersifat sebagai penutup dari kode sebelumnya. Agar lebih mudah carilah kode <p><data:comment.body/></p> dan kalau sudah ketemu, lihatlah susunannya seperti di atas :24

    ReplyDelete
  5. Wah bro, ud desperate gw nyobain kode diatas..
    gw ud nyobain persis sepersis2nya tp ttep lom bisa..

    bntuin please..

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Tetep ga bs bro, ud saya coba hasil copas dr code yg anda kasih, tp ttep ga ad hasil.

    ngedit code HTML emg susah y.. ckckck

    ap yg salah y?!?!

    ReplyDelete
  9. iya ms, saya nyoba n berhasil kok, mungkin tmn2 yang di atas, masih salah copas code nya, mohon maaf klo ad slah2 kata..

    ReplyDelete
  10. makasih banyak :10
    aku sudah banyak belajar... :18

    ReplyDelete
  11. makasih ya infonya
    Udah aku terapkan diblog saya

    ReplyDelete
  12. Yuhu.. success. Thank's ya :10

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. langsung bisa sob sekali coba..
    hehee :14

    ReplyDelete
  15. kode yg data:comments ataupun yg dd class sama2 gak ad gan -_-

    ReplyDelete
  16. Siip bgus2.. hhi... thanks infonya oke gan... :)

    ReplyDelete
  17. Tutorial bagus...

    dan link blog mas sudah di pasang di blog ku http://teguhhariyadi.blogspot.com

    masukin link blogku k blog mas yah...

    terima kasih..

    ReplyDelete
  18. alhamdulillah bisa nihh bang iqbal .. :12

    ReplyDelete
  19. mas iqbal, di template saya gak ada kode yg kayak disuruh search diatas :/ http://lh4.ggpht.com/_RVpTV2JOOxA/S1US6PmKUZI/AAAAAAAAB6A/PYCSAXW0ApQ/t4belajarblogger17.gif gimana dong?

    ReplyDelete
  20. gan, kalau mau kasih gambar tertentu pada komentar admin, misalnya logo blog kita di setiap bawah komentar kita itu gimana? mohon pencerahaannya !

    ReplyDelete
  21. gan saya kalau bagian Edit HTML Agak takut, karena dulu pas ganti template juga masuk ke area Edit HTML jadinya ilang.Tapi Alhamdulillah balik lagi di bantuin temen.Kira2 bagaimana bos?

    ReplyDelete
  22. :10 tak bosan mengucapkan terimakasih atas ilmunya..agan betul-betul tutor yang mantap

    ReplyDelete
  23. Waduh...kok aku gak bisa ya..padahal sudah ikuti langkah2 nya...

    ReplyDelete
  24. thnx iqbal..berhasil dan menarik

    ReplyDelete
  25. Akhirnya berhasil, terimakasih sob...

    ReplyDelete
  26. Mantap infonya nih sob,, makasih ya,

    ReplyDelete
  27. TUKAR LINK GAN... www.kriting-imut.blogspot.com

    ReplyDelete
  28. @Rensen's BlogCobalah untuk lebih teliti lagi sob, insyaAllah berhasil :D

    ReplyDelete
  29. @"The Guh"Ok, thanks telah berkunjung. Untuk tukar link silahkan ke halaman berikut:
    http://t4belajarblogger.blogspot.com/p/links.html

    ReplyDelete
  30. @ijal fauziKalau yang itu sistemnya mirip emoticon...hanya saja ada beberapa kode di template kita yg perlu diubah sedikit. InsyaAllah akan kita bahas di postingan tersendiri. nantikan update nya :D

    ReplyDelete
  31. @Bisnis Online BlogSebaiknya sebelum kita mengedit kode template kita ada baiknya semua kode template kita di simpan di sebuah notepad terlebih dahulu. hal ini sangat bagus untuk mengantisipasi jika terdapat kesalahan dalam pengeditan template maka kita bisa menggunakan kembali kode yang telah kita simpan di notepad tadi. Semoga membantu :D

    ReplyDelete
  32. @Geotroysama-sama. Thanks telah berkunjung :D

    ReplyDelete
  33. @Cilembu theaOk, jangan bosen buat kemari lagi sob :D

    ReplyDelete
  34. @Kriting-ImutThanks telah berkunjung sob. Untuk tukar link silahkan ke halaman berikut:
    http://t4belajarblogger.blogspot.com/p/links.html

    ReplyDelete
  35. makasih mas..

    http://neo-naira.blogspot.com/

    ReplyDelete