Setelah sehari yang lalu saya memposting Cara Menampilkan Gambar Hanya Pada Homepage pada kesempatan kali ini saya akan membagikan trik supaya gambar atau avatar pada komentar blog mempunyai ukuran yang berbeda. Karena ukuran komentar suatu blog secara default hanya 36px, kecil sekali bukan?
DEMO
Untuk mengubah ukuran gambar avatar komentar sangat mudah, kamu hanya perlu menambahkan kode CSS pada template blog kamu. Ukuran dari suatu avatar yang akan saya bagikan kali ini mempunya tinggi dan lebar 66px tetapi kamu juga masih bisa mengubahnya sesuai keinginan. Bagaimana apakah kamu sudah penasaran kode CSSnya, oleh karena itu kita simak dibawah ini.
1. Buka Dashboard -> Template -> Edit HTML
2. Cari kode ]]></b:skin> pada halaman kode template. (lebih mudah gunakan CTRL+F)
3. Copy kode dibawah ini dan paste kode tersebut di atas kode ]]></b:skin>
.avatar-image-container{
border:1px solid #d6d6d6;
margin-left: -30px;
-moz-border-radius: 4px;
background:#fff;
height:66px;
min-height: 66px;
width:66px;
min-width:66px;
}
.avatar-image-container img {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUTOqiULoFdlQqmoaGnS5jihV4gOpB_T7N2cy1Ea1eyoDaTyZsvBLJL_-JeZsLc0ap0BrX7VlNzcP_KO0hGC80pV7uHIm3juvFE_JSD3sQJhaXxfNF6qfN6jmojXJkzG2KCIOKWKWg2g/s200/Anonymous1.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:66px;
min-width:66px;
height:66px;
min-height:66px;
}Note:
- Kode berwana Hijau: Silahkan ganti ukurannya sesuai keinginan kamu
- Kode berwarna Merah: Silahkan ganti gambar avatar pengguna anonymous (pengguna yang tidak dikenal) sesuai keinginan kamu
4. Simpan template
Sekarang lihat pada kotak komentar blog kamu pastinya ukuran gambar avatar terlihat lebih besar, dan pengguna anonymous gambar avatar akan berganti.
Apabila ada permasalahan, silahkan berkomentar dibawah.