Comment author adalah pesan komentar yang dipublish oleh pemilik akun situs web atau blog. Tampilan komentar dari sang penulis atau admin biasanya berbeda dengan para pengunjung atau komentator, sebab bila dalam suatu situs banyak yang komentar para pengunjung atau komentar lainnya dapat membedakan dengan cepat mana komentar dari author dan mana dari para pengunjung. Memang trik ini sudah tergolong lama dalam dunia bloging tapi menurut pemikiran saya tidak ada salahnya untuk mengingatkan kembali ataupun untuk membuat suatu koleksi author comment pada ingatan kita.
Untuk memasang icon author comment ini tergolong mudah, karena kita hanya memasangnya dengan code CSS sebagai pemanggil code image icon author commentnya. Oke daripada makin bosan bacanya langsung saja menuju TKP dan simak penjelasan dibawah ini :
Installasi Code CSS
- Seperti biasa login to blog
- Pilih " Template "
- Kemudian Klik " Edit HTML "
- Setelah itu cari code ]]></b:skin> atau pun </style>, setelah ketemu silahkan copy code CSS dibawah ini dan pastekan didalam ataupun diatas code ]]></b:skin> atau pun </style>. kalo lebih bagusnya silahkan pastekan code dibawah ini dekat dengan atau bersamaan dengan code CSS (comments ) agar lebih mudah suatu saat anda untuk mengeditnya. Setelah selesi silahkan save template anda dan lihat hasilnya. Untuk DEMO anda bisa melihat Icon Author Comment pada komentar blog ini.
.comments .comments-content .icon.blog-author{position:absolute;top:-8px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBBnwEis9JgMPeLLVUqGYsF2S1AIswsetaMjl80UkC8PvprdKz9LMRn-yEtXMKu1SfGZL8YY87YNoUNpsEGvoIRaarorvE-yRajnJZnTUD8UOyYh-ejHHiAh8EUoLfSPn0P9bFJun3vek/s1600/Merah-autor.png);width:56px;height:56px}Bila anda ingin lebih kreative silahkan anda pilih gambar dibawah ini sesuai dengan tampilan blog anda. Code CSS dibawah ini gantikan dengan code CSS yang berwarna biru diatas, Code yang anda copy sesuai dengan gambar yang tertera pada postingan ini. Bila settingan letaknya kurang memadai / pas silahkan setting besar kecilnya angka pada code warna hijau diatas.
|  |
|  |
|  |
|  |
|  |
Perbedaan author comment dengan para komentator dengan menambahkan icon gambar User Author pada postingan kali ini, akan mempermudah para komentator melihat Komentar author pada suatu halaman blog form Comment.
Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.
Salam Blogger.... !!! .
Admin Rivai Silaban
DEMO sebagai contoh icon author comment
ReplyDeletetestt.. kunjungan balik kejari.com
Deletehehehe iya yah..
Deletemakasih atas kunjungannya sob..
Visit Back : http://sandaizer.blogspot.com
DeleteMantap Gan infonya. Sangat bermanfaat. #IkutanDemoComment
ReplyDeleteOoo.. beda icon saja ya.. Ok Makasih Banyak.. Sukses selalu..
ReplyDeletehehe silahkan bang HAMDAN. makasih atas pendapatnya salam kenal dari saya.
ReplyDeleteSenior, sudah saya coba Modify CSS pada Comment Publish
ReplyDeleteTadinya begini"
#comments-block,.comment-author,.profile-datablock{margin:.5em 0}
Saya tambahan menjadi:
#comment{border:5px solid #111;padding:2px 2 0 2px;}
#comments-block,.comment-author,.profile-datablock{margin:.5em 0}
KOK NGGAK TERJADI SESUATU YA SENIOR.
Mohon Pencerahannya sob.
heheh jangan dibilang seniorlah masih newbie kok alias belajar..
ReplyDeleteyah jelas salahlah sob. id comment padding:2px 2 0 2px;} aja yang nomer 2tidak pake ukuran px dan untuk margin:.5em 0} ada titik di depan nomer 5, coba dicek semua codenya dengan benar..
Malam Senior, mohon ditengok hasil modifikasi .comment saya.
ReplyDeleteKalau boleh mohon pencerahannya by CHAT boss...
Via G-Talk Senior,...
ReplyDeleteMaaf, kalau sempat aja. Kalau kita sama2 OL.
boleh boleh ntarlah kalo ada waktu yang tepat buat kita, digoogle plus agak sedikit berat lodingnya bagus nanti di FB saja biar lebih cepat dan lodingnya kencang.
ReplyDeletesob tapi hasilnya kok gak maksimal ya sob
ReplyDeletecoba di cek di ahmadsuyadi.blogspot.com
oh saya sudah lihat tapi kemunculannya hanya sdikit ya.. itu commentnya sudah kamu edit sob , tapi coba rubah ukuran
ReplyDeletetop:-8px;right:-12px; . Balikkan dulu semua ukuran ke posisi 1px, baru dari sana edit kembali kurang kekanan / kekiri atau kebawah / keatas.
ku pasng ndak mau muncul gan gemana caranya yah?
ReplyDeletemasa sih, mungkin commentnya sudah banyak yang sohib rubah sehingga tidak muncul atau bisa jadi kodenya kurang konplit dicopy sob, coba dicek balik
ReplyDeletePunya saya pake effect hover, jadi Gak cocok :D, Kunjungan dari masalah my-topsite.blogspot.com :D.
ReplyDeleteoh gitu, ...
Deletethx atas kunjungannya sob.. salam kenal
Dari tadi saya menulis keluhan di google
ReplyDeletemunculnya blog rivai terus tapi nice info ^_^
thx mba atas penapatnya...
Deletesemoga keluhannya cepat selesai
thx your visit
terima kasih mas infonya, kunjung balik mas di www microsystem net
ReplyDeleteralat www microsystemcomputer net
Deletemakasih atas kunjungannya salam kenal..
Deletemantap blognya sob, keren
kalo admin yang kaya punya agan rivai gmn tuh gan ? :matabelo:
ReplyDeleteKalo untuk icon itu saya belum posting sob, nanti bila ada waktu akan saya posting. thx atas kunjungannya..
Deleteterimakasih sebelumnya dari artikel sebelum2nya kotak komentar saya udah bener. tp yg ini kok gak bisa ya mas? udah saya pasang sebelum b:skin gak bisa. Sebelum /style juga gak ngaruh. positionnya juga udah saya ubah2 tp tetep gak ngaruh. pingin juga pake yg beginian. Dijawab ya mas :D
ReplyDeletemasa sih heheheh
Deleteoke, coba masuk ke CSS blog kamu, kamu masih ingat kan waktu pas masang kode CSS kotak komentarnya.. nah coba cari kode
.comments .comments-content .icon.blog-author { bla..bla }
kalo sudah ketemu. lihat kode didalam tanda { .. }
ganti semua kode yang ada dialam dengan kode dibawah ini
position:absolute;top:-8px;right:-12px;margin:0;background-image: url(http://3.bp.blogspot.com/-nCnxF2PjRto/UeLd1SemGaI/AAAAAAAABiE/IdqFZabBVUI/s1600/Merah-autor.png);width:56px;height:56px
sehingga menjadi
.comments .comments-content .icon.blog-author {
position:absolute;top:-8px;right:-12px;margin:0;background-image: url(http://3.bp.blogspot.com/-nCnxF2PjRto/UeLd1SemGaI/AAAAAAAABiE/IdqFZabBVUI/s1600/Merah-autor.png);width:56px;height:56px;
}
Tetep Gak Bisa Gan
DeleteTetep Gak Bisa Gan Gak Bisa Muncul Author NYA
DeleteMohon Bantuannya
Benar-benar terima kasih, kini blog-ku internetsehatblog.blogspot[dot]com makin cantik karena tips ini
ReplyDeletethx atas pendapatnya sob...
Deletegan mwtanya klo buat sperti kode konversi sama from diskusi gmna....
ReplyDeletebntuanyavgan
Mohon maaf untuk pertanyaan diluar topik diatas kami tidak dapat menjawabnya disini. untuk dapat reques tutorial kami hanya dapat menjawab pertanyaan para member blog atau yang join dengan blog ini, diluar itu semua pengunjung hanya dapat share kepada kami mengenai toping yang telah diposting..
Deleteuntuk menjadi member silahkan klik " Join to Blog "
Terimakasih
Salam Blogger
terimakasih sebelumnya dari artikel sebelum2nya kotak komentar saya udah bener. tp yg ini kok gak bisa ya mas? udah saya pasang sebelum b:skin gak bisa. Sebelum /style juga gak ngaruh.
ReplyDeleteUdah Saya Ganti Seperti INI
.comments .comments-content .icon.blog-author {
position:absolute;top:-8px;right:-12px;margin:0;background-image: url(http://3.bp.blogspot.com/-nCnxF2PjRto/UeLd1SemGaI/AAAAAAAABiE/IdqFZabBVUI/s1600/Merah-autor.png);width:56px;height:56px;
}
Juga Gk Ngaruh
Mohon BAntuannya Ya Mas
1 coba diperhatikan kode CSSnya yang berwarna hijau pada tutorial diatas, angka tersebut adalah untuk menggeser icon ke atas dan kesamping coba di perhatikan...
Delete2 . Coba diperhatikan code CSS comment yang lainnya yang telah ada pada template, dan perhatikan code yang anda copy jangan sampai ada satu kodepun yang tinggal termasuk titik dan koma.
asik bos
ReplyDeletethx juga box
Deletewalaikum salam...
ReplyDeletethx atas pendapat dan kunjungannya..
salam kenal...
salam kenal dah berhasil di terapkan mas,,thanks,keren2 nich artikel nya jadi betah saya di sini
ReplyDeletesama sama gan makasih atas pendapatnya..
DeleteTq gan :D
ReplyDeletewww.infocomp33.co.vu
bermanfaat sekali sepatu safety
ReplyDelete