Photo Profil Berbingkai

.



Agar photo frofile menjadi berbingkai anda hanya merubah nilai border saja pada stylee sheet css pada bagian untuk
photo frofile, contoh kode photo frofile berbingkai 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;
}



anda 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 anda 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 :

1. Sig in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save untuk backup data.
   





5. 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;

}





6. 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;

}






7. Klik tombol Pratinjau untuk melihat hasil perubahan





8. Jika sudah OK, klik tombol Simpan Perubahan Template





9. Selesai.

Untuk template baru :

1. Sign in





2. Klik menu Layout





3. Klik menu Edit HTML





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






5. Klik kotak kecil di samping tulisan Expand Template Widget





6. Tunggu beberapa saat sampai proses selesai





7. Cari kode yang mirip dengan kode di bawah ini :






.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;

}





8. 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;

}





9. Klik tombol Pratinjau untuk melihat perubahan





10. Bila sudah OK, klik tombol SIMPAN TEMPLATE





11. Selesai.

Sebagai catatan, untuk melihat efek figura berfungsi, tentunya anda
harus terlebih dahulu memasang photo profile.

Nantikan Artikel Menarik lainnya dari RIDO MEIVALDI.

Link para sahabat : Rido's komputer, Rido blog, Apik blog.