Cara Mudah Membuat Tanda Icon Author Comment Profesional di Blog

C

omment 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 commentpada 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

1. Seperti biasa login to blog
2. Pilih " Template "
3. Kemudian Klik " Edit HTML "
4. 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 Commentpada 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/AVvXsEjognlLlO4F_7-I7DLloWsoLQWDCa2AS6WPAuPbV1X5No8T-uKhQucAr2TUNECWeUSi7GRp0LfE7b2W8SmQdG3BEF5nYqA8gSbpaXxhuinnpnbaZ5US2SP19sP01vrX9IPJ0bJwofmfJzk/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.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUZyGaAH76Xn4WJ3rs49pIDO8U7KM7mofrvZFmz7fE5Y_EYvQfSlJ8_WxHBz4iO900PGQaI7qMlo-P1QbIkVujHH6S0WJFZXXHj4zEreMh7zlNuREDoi1gIguRugbE9K92YfoXfpLt6bA/s1600/autor-biru.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQUCuNmwEDxUotMmDpxdXub78AxKVB3SiOhhs8L7wI3kNwQ9NRCg9BBAHbYnxZc4FwR3fBckpNzvmFMZlUkpLDTKCV17-waWT7sLuq81CJBssO7yWq4qp3XFktXnML4AY4f9xwB_TPUI/s1600/autor-black.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekNMpKV8BNRCMI0ABtLTH_3-D2u_yMB4lA8UC1ReFE-AAw2lKhxfFnTsH6JWk7XeZh3Xk2Na1yzw9xJKIcLQl1S9Wxzk3RB-jPba_cZIwBB0_mAy6d31zzG8Nlr1QvSa5Tp70sP5jr5s/s1600/autor-hijau.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm55qSokonfsTunHYAMUOy8I5zLmuIRj1WG9XYCJwFgC33a7xWjZR3bqyXuFaSalFPAhMHdpW4Qh8iJi4sRfoA4IXr6A-ttLxW1Sk4M0D-m8B8yY0IFiW1OkOm90uEJlDbWPmpGvLSgOM/s1600/autor-kuning.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixjYCEaTZEsDXb2G_UMG5JDy0F0bIEt9CLQflChjIjesI-Bmpjnkh9UAE47Qq455hRQTNDTb0oGuohUuP18q4_ZH0RXlc0vNeiF6vuzNqJdyxsb1XJi9-cxY-6JzBKOtcJFDYzMv5b7g/s1600/authorpink.png