Trick Merubah Ukuran Avatar di Blogger New Threaded Comments

Klik untuk perbesar gambar!

Merubah ukuran avatar di box/kotak komentar Blogger New Threaded Comments memang membutuhkan trik khusus karena ukuran avatar ini memang sebelumnya telah di setting dengan ukuran tertentu. Merubahnya tak seperti ketika kita memposting image/gambar yang hanya perlu merubah width dan height. Trick merubah avatar kotak komentar melibatkan kode css !important (deklarasi css !important) agar kode yang diutamanakan oleh browser adalah kode css baru yang ditambahkan di template.

Kode CSS-1 :

.comment .avatar-image-container{
      width:60px; /* A */
      max-height:70px; /* D */
}
.comment .avatar-image-container img{
      width:50px; /* B */
      border:1px solid #666 !important;
      border-radius:5px;
      max-width:50px; /* C */
      max-height:70px; /* E */
      float:left;  /* by : gubhugreyot, April,2012 */
}
.comments .comment-block{
     margin-left:65px !important; /* F */
}

Keterangan :

1. A adalah lebar ruang/kolom penempatan avatar.
2. B adalah lebar avatar (width).
3. C adalah tinggi tinggi maksimal avatar (max-height).
4. D adalah tinggi ruang/kolom penampatan avatar.
5. E adalah lebar maksimal avatar (max-width).
6. F adalah jarak box teks komentar dari ujung sebelah kiri box komentar (margin-left).
7. A dibuat lebih besar dari B untuk memberi ruang bagi penggunaan padding, margin dan border.
8. D sama dengan E dengan ukuran lebih besar dari A, B dan C untuk memberi ruang jika tinggi image lebih besar dari lebar image (height>width).
9. F mempunyai selisih minimal sekitar 5px dibandingkan A agar ada ruang cukup untuk penempatan avatar.
10. Kode css di atas adalah kode paling sederhana untuk merubah ukuran avatar di comment box Blogger New Threaded Comments.
11. Dalam kode css di atas ukuran avatar telah diperbesar hingga mempunyai lebar 50px (width). Ukuran standar yang biasa digunakan berkisar 32px.

Kode CSS-2 :

.comment .avatar-image-container{
      width:90px;
      height:90px;
      max-height:150px;
}
.comment .avatar-image-container img{
      width:60px;
      border:1px solid #eee;
      padding:5px !important;
      background:#666 !important;
      border-radius:6px;
      max-width:100px;
      max-height:150px;
      float:left;
      margin:10px; 
      box-shadow:0 0 12px #000;
}
.comments .comment-block{
      margin-left:100px !important;
}

Keterangan :

1. Kode CSS-2 menggunakan ukuran avatar lebih besar.
2. Melibatkan background, padding, border-radius dan box-shadow sehingga ada beberapa perubahan toleransi ukuran yang berbeda dengan kode CSS-1 agar box-shadow bisa terlihat secara sempurna.

Cara menggunakan kode CSS :

1. Login ke Blogger.
2. Dasbor/Dasboard.
3. Rancangan/Design.
4. Edit HTML.
5. Cari kode ]]></b:skin> .
6. Letakkan kode CSS di atas ]]></b:skin>
   Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
7. Simpan Template/Save Template.
8. Selesai.