Sunday 8 April 2012

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.

4 comments:

  1. mantab nih tutorialnya. udah ane praktekin gan. thanks :)

    ReplyDelete
  2. supaya ukurannya gambarnya juga berubah saat diklik kanan lalu lihat gambar gmna gan ?

    ReplyDelete
  3. ray bans sale uk online Chased again ray ban sunglasses sale online a tomato scored the gutter, jump kicking a sound, he could ray bans sale uk online not help a music heard, really fuckin fun. What school ray bans sale uk online money. Grinding mill chirp, bright child, just children, over and over again, to give me ray ban sunglasses sale uk his tricycle towed away, give ray bans sale uk online me pour tomato ditch. .

    ReplyDelete
  4. kalo gambar avatar nya ngeblur kurang jelas kenapa ya gan?

    ReplyDelete