--> Cara Membuat Photo Profile Berbingkai | Kang-Mauk (Ibnu Mas'ud)

informasi menarik dan menyenangkan

www.informasibogorbarat.blogspot.com (Blog Kang Maux)

Sunday, June 26, 2011

Cara Membuat Photo Profile Berbingkai

| Sunday, June 26, 2011
Agar photo frofile menjadi berbingkai atau berfigura, langkahnya sangat sederhana sekali,yaitu sobat hanya merubah nilai border pada stylee sheet css pada bagian untuk photo frofile, contoh kode photo frofile untuk template lama seperti ini :

.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}

untuk template baru seperti ini :

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor; }


Tugas sobat hanya merubah nilai bordernya saja dengan nilai yang lebih besar tentunya, biar lebih jelas, sedikit saya ulas tentang kode-kode diatas :

float:left; --> artinya photo akan di simpan di sebelah kiri pada tulisan frofile.

padding:4px; --> padding disini maksudnya adalah jarak antara photo dengan figura (border) sebesar 4 pixel, jika sobat tidak menginginkan ada jarak antara photo dengan bingkai, maka tinggal ganti nilainya dengan 0px (nol).

border:1px solid #ddd; --> nah ini yang menjadi bingkai photonya, nilai figura adalah sebesar 1 pixel, jika ingin figuranya tampak lebih lebar, ya tinggal ganti nilai 1px dengan nilai yang lebih besar, contoh 6px, 8px atau yang lainnya. kode #ddd --> adalah kode warna untuk abu-abu, silahkan ganti dengan kode warna lainnya jika tidak cocok.


Masih bingung cara merubahnya? silahkan ikuti langkah-langkah berikut!

Untuk template klasik :

Sig in di blogger


Klik menu Template


Klik menu Edit HTML


Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting


Cari kode yang mirip dengan kode di bawah ini :



.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}


Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :



.profile-img img {
float:left;
padding:4px;
border:8px solid #ddd;
margin:0 8px 3px 0;
}


Klik tombol Pratinjau untuk melihat hasil perubahan


Jika sudah OK, klik tombol Simpan Perubahan Template


Selesai.




Untuk template baru :

Sign in


Klik menu Layout


Klik menu Edit HTML


Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data


Klik kotak kecil di samping tulisan Expand Template Widget


Tunggu beberapa saat sampai proses selesai


Cari kode yang mirip dengan kode di bawah ini :



.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}


Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :



.profile-img img {
float:left;
padding:4px;
border:8px solid $bordercolor;
margin:0 8px 3px 0;
}


Klik tombol Pratinjau untuk melihat perubahan


Bila sudah OK, klik tombol SIMPAN TEMPLATE


Selesai.



Sebagai catatan, untuk melihat efek figura berfungsi, tentunya sobat harus terlebih dahulu memasang photo profile ( ya iya rek, kalo ga ada photonya, opo yang mau di buatin bingkai tho).

Selamat mencoba

Related Posts