Friendster sekarang tambah asik karena bisa utak-atik profile dengan CSS. Ada dua macam pilihan untuk mengutak-atik profil kita. Pertama untuk nubi alias beginners dan kedua untuk advanced users. Untuk nubi cuma bisa ganti-ganti warna doang sedangkan untuk advanced users bisa ganti semuanya: background untuk masing-masing box, warna, font, dan lain-lain. Supaya tidak terkesan nubi dalam mengutak-atik profil kita maka simak tutorial berikut ini.
Untuk memulai utak-atik login ke account anda dan pilih menu “Edit Profile“. Setelah itu pilih menu “Customize“. Disitu ada 3 buah box. Yang pertama adalah untuk menambahkan media pada profil kita, kedua untuk mengubah profile secara manual dengan CSS, dan yang paling bawah adalah mengubah profil untuk beginner. Klik box yang kedua untuk memulai.
Pertama-tama kita akan mengganti font yang digunakan untuk menampilkan tulisan. Tambahkan line berikut di box kedua:
body {
font-family: Trebuchet MS, sans-serif;
font-size: 14px;
}
Selanjutnya kita akan mengubah tampilan box “About Me” pada halaman profil kita dengan menambahkan background image yang khusus. Pilihlah gambar latar yang netral. Artinya warnanya tidak banyak dan terkesan monoton. Tujuanya adalah agar tulisan di dalam box tersebut dapat dibaca. Setelah anda memilih gambar yang pas, upload ke ImageShack dan simpan url yang paling bawah. Ini adalah url ke image yang sudah anda upload. Kemudian tambah line berikut ini ke box di halam edit profile tadi
.left_column_wrapper .left_column_content {
background-image: url(http://url.ke.image.yang.dari.imageshack);
background-repeat: no-repeat;
background-position: right bottom;
}
#mainimage {
border: 1px dashed #e9ffbb;
}
URL nya ganti dengan URL yang dari imageshack tadi. Untuk positionnya sesuaikan dengan orientasi gambar anda. Jika anda menginginkan orintasi dari atas dan kiri maka ganti menjadi left top. Kode #mainimage fungsinya agar foto kita di beri frame yang putus-putus. Setelah anda save maka coba lihat hasilnya. Tadaaa. Profil anda menjadi lucu 
Supaya terlihat lebih keren dan beda dari yang lain, anda bisa mengubah font pada box “About Me” tadi dengan menggunakan small-caps alias huruf kapital semua. Caranya adalah demikian
#caption, .left_column_info {
font-variant: small-caps;
text-decoration: none;
color: #e9ffbb;
}
Sekarang kita akan memberi sentuhan yang berbeda pada box “More About Me”. Pilih gambar yang lain lagi dan ulangi langkah untuk mengupload gambar ke imageshack. Setelah itu tambahkan line berikut
.left_column_about {
background-image: url(http://url.ke.image.yang.dari.imageshack);
background-repeat: no-repeat;
background-position: right bottom;
}
Untuk mengubah warna font dan warna latar header pada masing-masing box gunakan kode ini
.left_column_header2, .left_column_content,
.right_column .column_content,
#teaserBox {
border-color: #015811;
}
.left_column_header2, .right_column .column_header,
#teaserBox h2{
background-color: #216800;
border-bottom: none;
}
.left_column_header2 h1, .right_column .column_header h1,#teaserBox h2{
color: #e9ffbb;
font-variant: small-caps;
}
Selamat mencoba, semoga bermanfaat.
Copyright By : Armen
