Kostumisasi Avatar Komentar

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

Avatar komentar

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.

35 komentar untuk “Kostumisasi Avatar Komentar”

  1. keren mas office boy.. hehehe... kalo untuk disqus-avatar gimana :(

    BalasHapus
  2. @Longfield Office Boy apaan Mbak?...he..he..he...

    Maksudnya mau dibesarin avatar-disqusnya? Mainkan sedikit code CSS pasti ente bisa.

    BalasHapus
  3. Berarti semua tampilan di Blog bersumber dari CSS nya ya Mas... Ganti Huruf sama Warna juga Bisa Dong?

    BalasHapus
  4. @Anak Desa :
    Untuk mengganti huruf dan warna bisa melalui CSS, gan.

    BalasHapus
  5. makasi udah berbagi ilmu
    semoga bermanfaat

    BalasHapus
  6. cipt,,
    biar tampilan avatarnya bisa lebih keren

    BalasHapus
  7. owh begitu ya caranya
    saya baru tau nih

    BalasHapus
  8. tutorial yang lengkap banget
    semoga sukses selalu ya gan !!!!

    BalasHapus
  9. oke juga nih infonya
    thanks udah share

    BalasHapus
  10. thx Your share Informations Y gan..greetings Good luck always

    BalasHapus
  11. wiss.... makasih y atas informasinya.....
    salam kenal ajj...

    BalasHapus
  12. Wow, kok comment formnya keren sih blog ini? Pasti lama bikinnnya

    BalasHapus
  13. @obat tradisional batu ginjal, @hepatitis B, @darah tinggi, @obat tradisional maag, @obat sakit pinggang, @xamthone plus, @obat alami kanker darah:
    Kayanya agan-agan obat-obatan semua :D

    @wedding souvenir:
    Nice to meet you, gan. Thanks to leave comment on this blog.

    @Omoh:
    Pakai alias segala, gan :) Lumayan gan daripada tidak ada yang dikerjakan.

    BalasHapus
  14. oh jadi bgtu ya caranya.
    saya yang msih newbie msih bingung2. heu

    BalasHapus
  15. mksih bnyak atas infonya.
    langsung di coba nih !

    BalasHapus
  16. Makasih banyak infonya,,, ;)

    BalasHapus
  17. Info yang bagus tw,,,, :)

    BalasHapus
  18. Infonya sangat bermanfaat tw,,,

    BalasHapus
  19. @Rudyternyta bisa untuk disqus.. hehe thx tutornya mas office boy :)

    BalasHapus
  20. wahh..saya baru tau ni mas...
    makasih y buat infonya

    BalasHapus
  21. Tes Tes, 1 2 3.. Dijajal..
    Mau liat hasilnya kaya apa Bos.. hehehe

    BalasHapus
  22. Uwaaaaa kewreeeeen!! Big thanks to you Buddy!! Keep on writing..
    ^_^v

    BalasHapus
  23. Ini baru namanya blog keren bin beken.

    BalasHapus
  24. Artikel Menarik terutama Infonya, boleh dicoba. Salam sukses

    BalasHapus
  25. Saya senang setelah membaca Tips dan Artikelnya, harus dicoba.Semoga berhasil

    BalasHapus
  26. Info dan Tulisannya Amazing, boeh dicoba. Sukses selalu

    BalasHapus
  27. Tipsnya sangat Infomatif, wajib dicoba salam sukses

    BalasHapus
  28. Terimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses

    BalasHapus
  29. Terimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berhasil

    BalasHapus
  30. Ilmu yang bermanfaat dan berguna Cuma ada di Wibesite ini, terutama Tips dan Artikelnya. Jadi ingin coba. Salam sukses

    BalasHapus
  31. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus