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.


82 comments:

  1. mantab master andi, blog saya juga sudah saya terapkan, RC saya juga dah normal kembali

    ReplyDelete
  2. maaf mas andi saya bari sempat berkunjung kesini, maklum, sibuk offline

    ReplyDelete
  3. saya tak dapat menemukan code css yang mas berikan, jadi apa yang harus aku lakukan ????

    ReplyDelete
  4. Rizky2009 > emg membuat simple kotak komentar fungsi scrolling ini... tp kelemahannya kalo kita browsing pake hp kgk bisa gunakan scrolling ini...baguslah kalo RC-mu sdh bagus kembali.. gkkp Riz..ini kamu sdh BW n komen diblogku.. :)

    ReplyDelete
  5. ehmmm, ga ngeh...he3..tp ntar jg ngeh, kan trs belajar..!tnx share ilmunya....success 4 u...!

    ReplyDelete
  6. Aku juga bingung, wakakakakakakak pa perlu qu ganti ya???? u punya koleksi template yang swep gak bro??? ku request ya.... hehehehehe

    ReplyDelete
  7. tiwi > pelajari saja dulu tiwi.. di save dulu tutor ini.. :)

    Uang Gratis > kekekekek :D ...heuumm template yg bagus buat uang gratis apa ya ?...

    ReplyDelete
  8. hmmm dengan begini akan mudah membedakan antara komentar dari pengunjung dan admin blog sendiri, good job kawan!

    ReplyDelete
  9. Wow panjang sekali kodenya kawand.
    Kalo aku suka yang original alias yang default saja kawan.

    Indah amat jika jadi warna yang berbeda.
    Sebagai pembeda.
    Suwun tutornya.

    ReplyDelete
  10. saya juga pernah coba sob, tapi untuk blog i-om.co.cc gk bisa , saya juga gk tau pasti penyyebabnya :D

    ReplyDelete
  11. bingung mau komen apa nih.
    mau nulis "nice post" aja itu nggak boleh!
    say no to junker!

    tapi... ya mau gimana lagi? aku bingung mau komen apa. hehehe

    nice post deh :)

    ReplyDelete
  12. wah mantep nih,kebetulan lupa naro ane,coba2 pngn ganti warna mas,heheee...
    thanks ya

    ReplyDelete
  13. saya juga udah coba tutorial ini daru DULU sob...bisa membuat blog lebih terlihat PROFESSIONAL ya..^_^

    HAPPY BLOGGING dari AZ COMSOFT

    ReplyDelete
  14. wah, makasih kawanku...
    sukses slalu ya...

    ReplyDelete
  15. Bunglon Blog Indonesia > emg itu tujuannya gan.. jd kelihatan admin blognya aktif membalas komentar pembaca.. :)

    tomo > yg default jg bagus gan.. :)

    Fadel > emg kdg2 kode2 script itu suka error kagak jelas.. mungkin jg krn sdh byk kita ubah2 & tambah2 Script widget template aslinya.. :D

    Danu Akbar > ujung2nya lu masih bilang Nice Post jg gan... wakakkaka :))

    iplock > silahkan dicoba2 gan.. ;)

    AZ COMSOFT > betul itu..akan terlihat lebih profesional & modis.. cieee :D

    Serba Blog > sama2 kawanku :)

    ReplyDelete
  16. Alif Winda Hardika > kok singkat amit komennya gan.. :( hiks..

    ReplyDelete
  17. salam sahabat
    wah siip dah pernah praktek mas ..thnxs ya..oh iya mas andi punya dua blog ya??kok yang satunya aku cari belum ketemu,waktu itu pas aku lihat di mas harto..ok met apa aja thnxs

    ReplyDelete
  18. wah mantap kang infonya makasih ya ..

    ReplyDelete
  19. sebenarnya ini sangat menarik.. dan sudah banyak digunakan.. tapi untuk yang awam.. akan rada bingung.. hehehehe...

    good post
    :)

    ReplyDelete
  20. wah.
    keren keren...
    thanks sob ilmunya..

    ReplyDelete
  21. wah tutor bagus kang ijin nyoba

    ReplyDelete
  22. Dhana/戴安娜 > salam sahabat .. :)
    ..dhana sih udah bisa trik ini..mas harto ?..jgn2 blog wordpress-ku dulu itu.. :D ..skrg sy menitis dri NOL lg reinkarnasi ke blogger.. hehe

    Diva > salam kenal jg.. :)

    velshadow > Siip sob... ;)

    ems > hehe.. emg agak rumit sedikit tutor yg ini gan.. jd perlu pemahaman .. :)

    Serba Serbi > silahkan dibaca2 gan..& dicoba tentunya :)

    ReplyDelete
  23. khidir > silahkan gan.. dipahami lalu dipraktekan.. :)

    ReplyDelete
  24. thya > silahkan dicoba ..tp pahami sj dulu tutornya .. :)

    ReplyDelete
  25. mantap mas ;)


    jangan lupa mampir ke om canel ya???

    ReplyDelete
  26. om canel > thx gan.. Siiip.. otw to TKP =>> :D

    ReplyDelete
  27. Q ambil code scripnya master Andi Wong, buat ku coba, makasih atas code scripnya

    ReplyDelete
  28. Tutorial yang bermanfaat untuk memudahkan komenter melihat jawaban atau tanggapan blogger

    Salam ukhuwah

    ReplyDelete
  29. wah makasih mas atas triknya :)

    ReplyDelete
  30. ini yg aku cari sob... thanks

    ReplyDelete
  31. PIK Remaja Al-Hikmah > silahkan saja sob.. :)

    BeDa > benar gan.. jadi kelihatan kalo admin blognya aktif.. :)

    Hizrian > sama2 gan.. silahkan dipelajari.. :)

    maul > kalo begitu silahkan dicoba gan.. :D

    ReplyDelete
  32. ane coba sob..makasih infonya

    ReplyDelete
  33. cak nun > silahkan dicoba gan.. :)

    ReplyDelete
  34. Jd tampil lebih elegan sebagai admin

    itu yang semua sobat blogger mau!

    Thanks bgt nih gan bwt tutorialnya^

    ReplyDelete
  35. saya bingung dan ga tau pula, kalau bisa saya minta emailnya

    ReplyDelete
  36. wahhh jadi bisa ganti-ganti warna kota koment donk yupz makasih infonya ya....

    Bali Villa Bali Villas

    ReplyDelete
  37. @Glan@Flixnn:

    memang membuat tampak lebih elegan ya.. :D

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

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

    ReplyDelete
  40. @suramadu:

    apa yang bikin bingung gan ? :) .. email saya wong.284@gmail.com

    ReplyDelete
  41. @Bali Wedding:

    betul sekali..silahkan dicoba sob.. :)

    ReplyDelete
  42. blog ini berat bgt gan,,kalo lebih ringan pasti lebih melejit di google

    ReplyDelete
  43. @wandi:

    hehe.. padahal udah lumayan ini gan.. dibandingkan dulu malah lebih berat... gw browing pake modem smart enteng aj tuh.. dikantor gw jg enteng (pke proxy telkom).. :)

    ReplyDelete
  44. nanti bru dicoba,,,
    tukar follow ya mas,,,
    aku dah follow 2h,,,

    ReplyDelete
  45. mksh atas infonya ya mbah..
    lamz knl mbah..
    saya newbie bngt.

    ReplyDelete
  46. @Eric Juanto:

    ya..silahkan nanti dicoba..oke i will follow u too.. ;)

    ReplyDelete
  47. @entiz:

    salam kenal entiz..senang bisa membantu.. :)

    ReplyDelete
  48. lamz knl jga mbah andi..
    mbah saya ingin buat kotak koment kaya mbah andi...!!
    tinggal klik di "Buat kotak komentar admin seperti ini.." ya mbah ??
    :)]

    ReplyDelete
  49. @entiz:

    betul entiz.. ikuti saja langkah2 tutorialnya.. smoga berhasil :)

    ReplyDelete
  50. kode author komen diatas gag da di tempate saya. Ada solusi?

    ReplyDelete
  51. waahh..thank ya mas infonya,, Ane coba duluu mass...

    ReplyDelete
  52. @rudycyber:

    kode komen author yang CSS ( atau yg kode hTML-nya gan...? ( keduanya memang kode tambahan kok)..coba di croschek lagi..gk mungkin kalo gk ada data:comment-author di template blog..ntar admin kagak bisa bls komen.. mungkin aj namanya agak sedikit berbeda.. :)

    ReplyDelete
  53. siip mas... mantaap!hehe slam blogger indonesia... :D

    ReplyDelete
  54. thanks bro ...keren banget blognya

    ReplyDelete
  55. @Herlan:

    terima kasih herlan.. salam blogger indonesia.. ;)

    ReplyDelete
  56. mau coba juga gan, mudah2an cocok dgn template saya.

    ReplyDelete
  57. Numpang tanya donk, tapi agak OOT. Kalau mau bikin semacam garis pembatas antar komentar ato bikin warna latar setiap komentar selang-seling gitu gimana ya caranya? Apa itu bawaan dari template blognya? Thx sebelumnya

    ReplyDelete
  58. @Republican Wasp:

    ada yg bawaan dari template blognya.. ada juga yg kita tambahin sendiri.. kalo warna latar tinggal kita pake kode background warna apa seperti fffa atau a4fff..

    ReplyDelete
  59. Kok aku ga ketemu kode CSS nya mas. . .
    maklum masih newbi. . .
    Salam kenal ya. . . . .

    ReplyDelete
  60. @ahmad-roni:

    coba di centang "expand template widget-nya" kalo masih gk ada di copas aja code CSS yg ada di contoh postingan ini gan.. :)

    ReplyDelete
  61. Iya Gan, , Udah saya coba. .tp,ga ketemu. .
    Dan sekarang udah saya Copas dan di Edit lagi, ,
    Hasil nya cuma kayak gitu Gan. . .
    Klo untuk ngasih warna dikotak nama kita kayak gimana ya. . .

    Udah saya FOLLOW gan. . .
    Salam kenal Ya. . .
    Ditunggu pencerahannya Gan. . .

    ReplyDelete
  62. @ahmad-roni:

    kasih(ubah) warna utk kotak nama admin ya.. di bagian kode CSS pada comment-body-author trus ganti kode warna di kode background-nya..misalnya FDFA3..

    ReplyDelete
  63. @Andi Wong:

    Klo gitu ijin rekues soal itu bisa ga? Saya masih bingung ngutak-atik kode komentarnya soalnya. Sori klo jadinya ngerepotin, hehehe

    ReplyDelete
  64. sudah saya praktekan mas bro dan berhasil..
    thank sharingnya... )D

    ReplyDelete
  65. Gan, mau nanya, kalau avatar author gak muncul gimna tu?

    ReplyDelete
  66. Saya dah follow mas.. Follow Back Yoo..

    ReplyDelete
  67. follow q donk di blog bacuv.blogspot.com

    ReplyDelete
  68. bagus nih infonya, langsung saya coba ya... siapa tau bs...

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.