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 (), 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 , lihat ke atas dunk), dah dulu ya...dah adzan tuh...^
Semoga Bermanfaat []
Tags: cara membuat warna komentar admin berbeda, membuat highlight author comment, membuat komen admin beda, cara edit template komentar admin beda
Home
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
ReplyDeleteERRORR
ReplyDelete::terima kasih::
Hm^ - hati2, sabar, dan lebih jeli lagi sob! Pasti bisa :10
ReplyDeleteGa ngaruh bro.. ud gw ikutin persis bgt..
ReplyDeleteCoba trus aj sob, masalahnya gak semua kode template sama, mungkin sudah kena edit sebelumnya. Oleh karena itu nyoba satu persatu, CATATAN:
ReplyDeleteJangan 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
Wah bro, ud desperate gw nyobain kode diatas..
ReplyDeletegw ud nyobain persis sepersis2nya tp ttep lom bisa..
bntuin please..
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteTetep ga bs bro, ud saya coba hasil copas dr code yg anda kasih, tp ttep ga ad hasil.
ReplyDeletengedit code HTML emg susah y.. ckckck
ap yg salah y?!?!
iya ms, saya nyoba n berhasil kok, mungkin tmn2 yang di atas, masih salah copas code nya, mohon maaf klo ad slah2 kata..
ReplyDeletemakasih banyak :10
ReplyDeleteaku sudah banyak belajar... :18
makasih ya infonya
ReplyDeleteUdah aku terapkan diblog saya
Yuhu.. success. Thank's ya :10
ReplyDelete:33 deee udah bisa
ReplyDeleteThis comment has been removed by the author.
ReplyDeletelangsung bisa sob sekali coba..
ReplyDeletehehee :14
kode yg data:comments ataupun yg dd class sama2 gak ad gan -_-
ReplyDeleteSiip bgus2.. hhi... thanks infonya oke gan... :)
ReplyDeletemakasih atas infonya cuy...
ReplyDeleteTutorial bagus...
ReplyDeletedan link blog mas sudah di pasang di blog ku http://teguhhariyadi.blogspot.com
masukin link blogku k blog mas yah...
terima kasih..
alhamdulillah bisa nihh bang iqbal .. :12
ReplyDeleteok sob...
ReplyDeletetq infonya...
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?
ReplyDeletegan, kalau mau kasih gambar tertentu pada komentar admin, misalnya logo blog kita di setiap bawah komentar kita itu gimana? mohon pencerahaannya !
ReplyDeletegan 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:10 tak bosan mengucapkan terimakasih atas ilmunya..agan betul-betul tutor yang mantap
ReplyDeleteDone,..It's work!!
ReplyDeleteWaduh...kok aku gak bisa ya..padahal sudah ikuti langkah2 nya...
ReplyDeletegk ada tuh nya....
ReplyDeletebantu tolong
thanks atas infonya gan
ReplyDeletethnx iqbal..berhasil dan menarik
ReplyDeleteAkhirnya berhasil, terimakasih sob...
ReplyDeleteMantap infonya nih sob,, makasih ya,
ReplyDelete@Geotroysekali lagi mantap gan
ReplyDeleteTUKAR LINK GAN... www.kriting-imut.blogspot.com
ReplyDelete@Rensen's BlogCobalah untuk lebih teliti lagi sob, insyaAllah berhasil :D
ReplyDelete@aRvaNsThanks telah berkunjung sob
ReplyDelete@"The Guh"Ok, thanks telah berkunjung. Untuk tukar link silahkan ke halaman berikut:
ReplyDeletehttp://t4belajarblogger.blogspot.com/p/links.html
@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@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@Geotroysama-sama. Thanks telah berkunjung :D
ReplyDelete@Cilembu theaOk, jangan bosen buat kemari lagi sob :D
ReplyDelete@Kriting-ImutThanks telah berkunjung sob. Untuk tukar link silahkan ke halaman berikut:
ReplyDeletehttp://t4belajarblogger.blogspot.com/p/links.html
makasih mas..
ReplyDeletehttp://neo-naira.blogspot.com/