Kostumisasi Avatar Komentar

Kenapa “gambar avatar komentar” di Blogger™ Anda kelihatan lebih besar? Kenapa juga letaknya berbeda dengan default Blogger™?

Dalam Blogger™ terdapat kode-kode embeded—kode perintah spesifik oleh pihak developer untuk menunjang kinerja mesin blogger—yang berfungsi mengatur secara default tampilan blog. Nah, termasuk didalamnya adalah pengaturan tampilan komentar (red=“bukan formulir komentar”). Silakan Anda koreksi, jika frase kata yang berwarna merah (dalam tanda kutip) keliru.

Apabila Anda ingin mengetahui kode CSS embeded tersebut, coba buka blog Anda & tekan tombol Ctrl + U pada papan ketik. Mungkin Anda akan melihat kode seperti ini:

<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/129348724-widget_css_bundle.css' />

Dari bundle CSS di atas akan kita temui kode avatar komentar sebagai berikut.

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
}

#comments-block .avatar-image-container.avatar-stock img {
border-width:0;
padding:1px;
}

#comments-block avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}

Kode yang berwarna hijau dapat Anda lihat tampilannya pada komentar klasik Blogger™. Sedangkan yang berwarna merah merupakan tampilan avatar komentar di bawah posting.

Memperbesar gambar avatar

Untuk memperbesar gambar avatar pada komentar di bawah posting, maka kita akan menggunakan kode CSS yang berwarna merah & letakkan di atas ]]></b:skin>.

#comments-block avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}

Catatan: Silakan dirubah nilai atribut height & width—ditandai dengan warna merah—sesuai dengan keinginan Anda. Kembali ke ulasan “mengganti gambar blank”

Merubah letak avatar

Lihat kembali kode untuk “memperbesar gambar avatar”, kemudian ganti atribut left—ditandai dengan warna biru—sesuai dengan letak yang Anda inginkan. Nilai minus (-) berarti avatar akan bergeser ke kiri. Sebaliknya jika nilai yang dimasukkan positif, maka avatar akan bergeser ke kanan.

Anda dapat pula menambahkan atribut lainnya, contoh margin:2em 0 -2px 0;. Artinya avatar akan bergeser ke bawah sejauh 2 ems dari tempatnya semula, sedangkan nilai -2px hanya sekedar untuk menyelaraskan kode CSS avatar dengan CSS inline dalam HTML komentar seperti di bawah ini (hanya untuk diketahui saja).

<b:if cond='data:comment.favicon'>
  <img expr:src='data:comment.favicon' height='32px' style='margin-bottom:-2px;' width='32px'/>
</b:if>

Mengganti gambar blank

Tampilan blank pada avatar akan terjadi jika pengomentar menggunakan identitas “Anonymous” atau “Name/URL” atau tidak memiliki gambar avatar pada identitasnya. Untuk mengganti gambar blank dengan gambar yang Anda inginkan, maka kode yang digunakan adalah sebagai berikut:

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
}

Tambahkan atribut:

background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;

Silakan ubah alamat & nilai dari masing-masing atribut yang ditandai dengan warna hijau. Dan agar tampilan gambar lebih bagus, sebaiknya gambar avatar yang Anda upload berukuran sama dengan atribut height & width pada ulasan “memperbesar gambar avatar”.

Hasilnya akan terlihat seperti di bawah ini.

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;
}

Kemudian letakkan di atas kode ]]></b:skin>.

Mempercantik avatar dengan CSS3

Terakhir, untuk mempercantik tampilan avatar komentar dapat menggunakan CSS3, antara lain rounded corner & box shadow.

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;
border-radius:5px;
box-shadow:2px 2px 5px #666666;
}

Catatan: Atribut CSS yang berwarna biru merupakan penyisipan dari tag “Mengganti gambar blank” di atas.

Anda pun bisa melakukan kostumisasi lain, sehingga tampilan avatar komentar mampu mewakili keinginan dan kebutuhan Anda.