Trick Merubah Ukuran Image Profile Blogger

Tips & trick blogger ini berkaitan dengan widget profile blogger. Dalam widget ini, image yang digunakan berukuran maksimal 80px (width) x 80px (height). Jika anda mengupload image dengan ukuran antara width dan height tak sama maka secara otomatis salah satu sisi yang lain (width atau height) di set pada ukuran 80px sedang bagian yang lain menyesuaikan dengan skala image yang diupload. Sebagai contoh, jika misalnya anda upload image berukuran 400px (width) dan 300px (height) maka image profile akan berukuran 80px (width) dan 60px (height). Angka 80px:60px akan sebanding dengan 400px:300px.

Standar ukuran image profile tersebut bukanlah angka mati karena dengan hanya menggunakan kode CSS anda dapat merubahnya dalam berbagai ukuran sekehendak hati. Bahkan, dengan penambahan kode css pengatur height dan width image profile, angka perbandingan (skala) yang berlaku tersebut dapat kita rubah sesuka hati. Di bawah ini disertakan beberapa contoh perubahan ukuran image profile. Silahkan klik pada setiap image agar ditampilkan dalam ukuran sesungguhnya!.

1. Ukuran standart (default).
2. Ukuran image profile diperkecil.
3. Ukuran image profile diperbesar dengan ukuran sedang.
4. Ukuran image profile diperbesar dengan ukuran maksimal atau selebar box/kolom widget.

Kode CSS perubah ukuran image profile

Kode CSS dibawah ini akan merubah ukuran image profile dengan skala sesuai image yang digunakan sebagai image profil.

Kode CSS

.profile-img{
       width:20% !important;
       height:auto !important;
}

Cara menggunkan kode

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML
5. Backup Template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Beri nama dan simpan file template di folder PC.
6. Cari kode ]]></b:skin>
7. Copy dan paste-kan kode CSS di atas ]]></b:skin>
8. Klik Simpan Template (Save Template).
9. Buka blog untuk melihat hasil perubahan ukuran image profile.

Catatan/Keterangan:

• Lakukan perubahan pada nilai 20% untuk mendapatkan ukuran yang dikehendaki.
• Nilai 100% dipergunakan untuk memperoleh ukuran terbesar hingga lebar image sebesar lebar box/kolom widget profil.
• Semakin nilai diperkecil maka lebar dan tinggi image akan semakin kecil.

Kode CSS untuk merubah ukuran tanpa skala

Dengan kode CSS ini anda dapat merubah ukuran image tanpa harus mendasarkan pada perbandingan (skala) image yang telah diupload. Tentu saja perubahan tanpa skala perbandingan yang standar akan membuat image terlihat lonjong (melebar atau meninggi), hingga bisa terjadi bila image berupa gambar utuh satu tubuh maka akan terlihat menjadi cebol atau terlalu jangkung.

Kode CSS

.profile-img{
       width:20% !important;
       height:100px !important;
}

Catatan:

• Lakukan perubahan pada nilai 20% dan 100pxuntuk mendapatkan ukuran yang dikehendaki.
• Semakin besar nilai maka akan semakin lebar dan semakin tinggi.