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.
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/>
<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='"comment-body " + 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'>
</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='"comment-body " + 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;
}
#comments-block .comment-body{
border-left:1px solid #C6D09D;
border-right:1px solid #C6D09D;
margin-left:0;
margin-right:20px;
padding:7px}
font-size:100%;
font-weight:normal;
color:black;
}
atau seperti dibawah ini di template blog saya.
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;
}
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.
mantab master andi, blog saya juga sudah saya terapkan, RC saya juga dah normal kembali
ReplyDeletemaaf mas andi saya bari sempat berkunjung kesini, maklum, sibuk offline
ReplyDeletesaya tak dapat menemukan code css yang mas berikan, jadi apa yang harus aku lakukan ????
ReplyDeleteRizky2009 > 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.. :)
ReplyDeleteehmmm, ga ngeh...he3..tp ntar jg ngeh, kan trs belajar..!tnx share ilmunya....success 4 u...!
ReplyDeleteAku juga bingung, wakakakakakakak pa perlu qu ganti ya???? u punya koleksi template yang swep gak bro??? ku request ya.... hehehehehe
ReplyDeletetiwi > pelajari saja dulu tiwi.. di save dulu tutor ini.. :)
ReplyDeleteUang Gratis > kekekekek :D ...heuumm template yg bagus buat uang gratis apa ya ?...
hmmm dengan begini akan mudah membedakan antara komentar dari pengunjung dan admin blog sendiri, good job kawan!
ReplyDeleteWow panjang sekali kodenya kawand.
ReplyDeleteKalo aku suka yang original alias yang default saja kawan.
Indah amat jika jadi warna yang berbeda.
Sebagai pembeda.
Suwun tutornya.
saya juga pernah coba sob, tapi untuk blog i-om.co.cc gk bisa , saya juga gk tau pasti penyyebabnya :D
ReplyDeletebingung mau komen apa nih.
ReplyDeletemau 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 :)
wah mantep nih,kebetulan lupa naro ane,coba2 pngn ganti warna mas,heheee...
ReplyDeletethanks ya
saya juga udah coba tutorial ini daru DULU sob...bisa membuat blog lebih terlihat PROFESSIONAL ya..^_^
ReplyDeleteHAPPY BLOGGING dari AZ COMSOFT
wah, makasih kawanku...
ReplyDeletesukses slalu ya...
Bunglon Blog Indonesia > emg itu tujuannya gan.. jd kelihatan admin blognya aktif membalas komentar pembaca.. :)
ReplyDeletetomo > 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 :)
thank ya ilmunya...
ReplyDeleteAlif Winda Hardika > kok singkat amit komennya gan.. :( hiks..
ReplyDeletesalam sahabat
ReplyDeletewah 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
nice info
ReplyDeletelam kenal ya
wah mantap kang infonya makasih ya ..
ReplyDeletesebenarnya ini sangat menarik.. dan sudah banyak digunakan.. tapi untuk yang awam.. akan rada bingung.. hehehehe...
ReplyDeletegood post
:)
wah.
ReplyDeletekeren keren...
thanks sob ilmunya..
wah tutor bagus kang ijin nyoba
ReplyDeleteDhana/戴安娜 > salam sahabat .. :)
ReplyDelete..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 :)
khidir > silahkan gan.. dipahami lalu dipraktekan.. :)
ReplyDeletehmm,, aku pengen nyoba ah.
ReplyDeletethya > silahkan dicoba ..tp pahami sj dulu tutornya .. :)
ReplyDeletemantap mas ;)
ReplyDeletejangan lupa mampir ke om canel ya???
om canel > thx gan.. Siiip.. otw to TKP =>> :D
ReplyDeleteQ ambil code scripnya master Andi Wong, buat ku coba, makasih atas code scripnya
ReplyDeleteTutorial yang bermanfaat untuk memudahkan komenter melihat jawaban atau tanggapan blogger
ReplyDeleteSalam ukhuwah
wah makasih mas atas triknya :)
ReplyDeleteini yg aku cari sob... thanks
ReplyDeletePIK Remaja Al-Hikmah > silahkan saja sob.. :)
ReplyDeleteBeDa > benar gan.. jadi kelihatan kalo admin blognya aktif.. :)
Hizrian > sama2 gan.. silahkan dipelajari.. :)
maul > kalo begitu silahkan dicoba gan.. :D
ane coba sob..makasih infonya
ReplyDeletecak nun > silahkan dicoba gan.. :)
ReplyDeleteJd tampil lebih elegan sebagai admin
ReplyDeleteitu yang semua sobat blogger mau!
Thanks bgt nih gan bwt tutorialnya^
saya bingung dan ga tau pula, kalau bisa saya minta emailnya
ReplyDeletewahhh jadi bisa ganti-ganti warna kota koment donk yupz makasih infonya ya....
ReplyDeleteBali Villa Bali Villas
@Glan@Flixnn:
ReplyDeletememang membuat tampak lebih elegan ya.. :D
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete@suramadu:
ReplyDeleteapa yang bikin bingung gan ? :) .. email saya wong.284@gmail.com
@Bali Wedding:
ReplyDeletebetul sekali..silahkan dicoba sob.. :)
blog ini berat bgt gan,,kalo lebih ringan pasti lebih melejit di google
ReplyDelete@wandi:
ReplyDeletehehe.. 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).. :)
nanti bru dicoba,,,
ReplyDeletetukar follow ya mas,,,
aku dah follow 2h,,,
mksh atas infonya ya mbah..
ReplyDeletelamz knl mbah..
saya newbie bngt.
@Eric Juanto:
ReplyDeleteya..silahkan nanti dicoba..oke i will follow u too.. ;)
@entiz:
ReplyDeletesalam kenal entiz..senang bisa membantu.. :)
lamz knl jga mbah andi..
ReplyDeletembah saya ingin buat kotak koment kaya mbah andi...!!
tinggal klik di "Buat kotak komentar admin seperti ini.." ya mbah ??
:)]
@entiz:
ReplyDeletebetul entiz.. ikuti saja langkah2 tutorialnya.. smoga berhasil :)
kode author komen diatas gag da di tempate saya. Ada solusi?
ReplyDeletewaahh..thank ya mas infonya,, Ane coba duluu mass...
ReplyDelete@rudycyber:
ReplyDeletekode 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.. :)
@sanspirasi:
ReplyDeleteoke.. dicoba aj gan.. ;)
siip mas... mantaap!hehe slam blogger indonesia... :D
ReplyDeletethanks bro ...keren banget blognya
ReplyDelete@Herlan:
ReplyDeleteterima kasih herlan.. salam blogger indonesia.. ;)
@boy:
ReplyDeletemaksih boy.. ;)
mau coba juga gan, mudah2an cocok dgn template saya.
ReplyDeleteNumpang 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
ReplyDeletesalam kenalan donk
ReplyDelete@story:
ReplyDeletesilahkan dicoba gan.. ;)
@Republican Wasp:
ReplyDeleteada 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..
@hany:
ReplyDeleteSalam kenal jg Hany.. ;)
Kok aku ga ketemu kode CSS nya mas. . .
ReplyDeletemaklum masih newbi. . .
Salam kenal ya. . . . .
@ahmad-roni:
ReplyDeletecoba di centang "expand template widget-nya" kalo masih gk ada di copas aja code CSS yg ada di contoh postingan ini gan.. :)
Iya Gan, , Udah saya coba. .tp,ga ketemu. .
ReplyDeleteDan 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. . .
@ahmad-roni:
ReplyDeletekasih(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..
@Andi Wong:
ReplyDeleteKlo gitu ijin rekues soal itu bisa ga? Saya masih bingung ngutak-atik kode komentarnya soalnya. Sori klo jadinya ngerepotin, hehehe
mantap mas....
ReplyDeletemakasih banget infonya..
sudah saya praktekan mas bro dan berhasil..
ReplyDeletethank sharingnya... )D
@Perlunya Web Komunitas Event Organizer:
ReplyDeletemantap
ANONIM
ReplyDelete:))
ReplyDeleteGan, mau nanya, kalau avatar author gak muncul gimna tu?
ReplyDeleteSaya dah follow mas.. Follow Back Yoo..
ReplyDeletefollow q donk di blog bacuv.blogspot.com
ReplyDeleteThank's banget!
ReplyDeletebagus nih infonya, langsung saya coba ya... siapa tau bs...
ReplyDeleteKeren ;)
ReplyDelete