9 Jul 2012

Trik merubah Image Profil Blogger menjadi berbentuk bulatClick here to get more tutorials!

Semua image profile blogger yang ditampilkan di halaman blog sebagai pelengkap widget profile (About me atau Tentang saya) ditampilkan dalam bentuk kotak dengan ukuran tinggi atau lebar sebesar 80px. Bentuk profile image tak harus selalu dalam bentuk bujur sangkar (segi 4 sama sisi), namun bisa juga meninggi atau melebar dengan salah satu sisi 80px dan sisi yang lain kurang dari 80px, yang bergantung pada bentuk & ukuran image profile yang diupload melalui halaman dasbor blogger (seperti dalam gambar di samping.

Menambahkan kode css adalah salah satu cara termudah untuk merubah bentuk image profil menjadi tidak lagi kotak. Bentuk baru bisa elips atau bulat yang bergantung pada image yang digunakan. Apabila anda menggunakan image profile blogger bujur sangkar maka akan menghasilkan image profil baru berbentuk bulat penuh. Jika anda menginginkan yang seperti ini ada baiknya untuk mengunggah image profile baru dengan image berbentuk kotak segi 4 sama sisi.

Kode CSS Image Profil Blogger Bulat:

#Profile1 .widget-content img.profile-img{
    margin-bottom:5px;
    padding:1px;
    border-radius:43px;
    border:2px solid #444; /* warna border bisa dirubah - #444 */
}

Cara menambahkan kode css :

  1. Login ke Blogger
  2. Dasbor (Dasboard)
  3. Template
  4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
  5. Edit HTML
  6. Template › Edit HTML
    • Procced (Lanjutkan)
    • Cari Kode : ]]></b:skin>
    • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
    • Copy & paste-kan kode css tepat di atas kode tersebut.
    • Simpan Template/Save Template
  7. Selesai...
  8. Buka blog dan lihat penampilan image profile blogger baru anda!
Bentuk kode css di template :
#Profile1 .widget-content img.profile-img{
    margin-bottom:5px;
    padding:1px;
    border-radius:43px;
    border:2px solid #444; /* warna border bisa dirubah - #444 */
}
]]></b:skin>

Keterangan :

Sebaiknya widget profil ditempatkan pada bagian blog (elemen - sidebar) yang mempunyai lebar diatas 300px!

1 comment: