Bintang Merah :: Merubah tampilan profile Friendster

Posted by: bintangmerah on Tuesday, May 30, 2006 - 06:05 AM

Merubah tampilan profile Friendster

Bosan dengan tampilan profile Friendster anda yang standar?
Padahal tampilan dari profile ini akan mencerminkan siapa anda.
Friendster memberikan fasilitas untuk merubah tampilan profile, dengan berbagai macam pilihan yang cukup luas. Misalnya tampilan background dengan gambar yang dapat kita pilih sendiri, atau tampilan transparan dari kotak-kotak yang ada disana, belum lagi pilihan warna yang dapat kita pilih semau kita.
Yang paling mudah adalah dengan memilih template warna yang telah disediakan oleh Friendster. Tapi ini biasanya tidak cukup karena tampilan profile menjadi aneh dan tidak sesuai dengan keinginan kita. Cara lain adalah dengan menulis kode CSS dibagian Advanced Users. Tapi… siapa yang ingin menulis kode CSS?
Lebih baik kita gunakan saja kode CSS yang sudah jadi, seperti yang digunakan pada friendster profile BMtwo. Nanti anda dapat merubah kode CSS tersebut sehingga memberikan tampilan profile friendster yang sesuai dengan selera anda.
Kode CSS yang diberikan akan memberikan tampilan profile friendster seperti ini.

Lakukan langkah-langkah berikut ini secara berurutan.

1. Masuklah ke My Profile di friendster anda. Dari profile screen, klik pilihan ‘Edit Profile’.
2. Pada screen My Profile klik ‘Customize*NEW*’
3. Anda akan melihat kotak dengan judul ‘Advanced users’. Kalau belum di customize, kotak ini kosong tidak berisi apa-apa. Inilah tempat kita memasukkan kode CSS. Kotak seperti ini biasa disebut sebagai text field. Copy – Paste kode CSS berikut ini kedalam text field tersebut.

/* michael's friendster css editor v3.2 | advanced mode */
/* http://www.editfriendster.com */

/* MASTER BACKGROUND */
body { background-color:transparent;

background-image:url(http://www.bintangmerah.com/images/Core/daisy.jpg);

background-attachment:fixed; background-position:center; background-repeat:no-repeat; }

/* HEADING: NAME */
.left_column_header h2 { font-size: !Important; } .left_column_header

h2,.left_column_header h2 .online { color:#0000cc; font-weight:bold; }

/* HEADING: LARGE GREEN */
.left_column_header2,.right_column_title,.right_column .column_header {

background-color:#3399ff; height:20px; border:1px solid; border-color:#3399ff; }
.left_column_header2 h1,.right_column_title h1,.right_column .column_header h1 {

font-size:; margin:3px 0px 0px 5px; color:#ffffff; font-weight:bold; }
.commonbox h2 { font-size: !Important; background-color:#3399ff; color:#ffffff;

font-weight:bold; }
#teaserbox h2 { font-size: !Important; background-color:#3399ff; color:#ffffff;

font-weight:bold; }
#navigation div { background-image:none; }
#mainnav { background-color:#0033ff; background-image: none; }
#mainnav .left, #mainnav .right { background-color: transparent; background-image: none;

}
#navdivider { border: 0px; }

/* BOX BG & BORDER: ALL OTHERS */
.left_column_content,.right_column_content,.right_column .column_content,.boxcontent {

background-color:#e5e5e5; } .commonbox { }
#teaserbox div { background-color:#e5e5e5; }

/* STYLES FOR MY PROFILE-BOX */
.left_column_info p { font-size:12px; color:#0000ff; }
.left_column_info a,.left_column_info a:visited { font-size:12px; color:#0000ff;

text-decoration:none; }

/* STYLES FOR MORE ABOUT-BOX */
.left_column_about a { font-size:12px; color:#0000ff; text-decoration:none; }

/* STYLES FOR MY BLOG-BOX & MY GROUPS-BOX */
.blogs p,.right_column_groups_content p { font-size:12px; color:#003300; }
.blogs a,.blogs a:visited,.right_column_groups_content a { font-size:12px;

border-bottom:0px; color:#3333cc; font-weight:bold; text-decoration:underline; }
.blogs h2 { font-size:13px !Important; border-bottom-color:#0000ff;

border-bottom-width:1px; border-bottom-style:solid; color:#0000ff !Important;

font-weight:bold; }
.right_column_groups { border-bottom-color:#0000ff; border-bottom-width:1px;

border-bottom-style:solid; }

/* STYLES FOR MY TESTIMONIALS-BOX */
.left_column_testimonials_content a,.left_column_testimonials_content

a:active,.left_column_testimonials_content a:visited,.left_column_testimonials_add a {

font-size:12px; color:#0000ff !Important; font-weight:bold; text-decoration:underline; }
.left_column_testimonials_content a:hover,.left_column_testimonials_add a:hover {

font-size:12px; color:#66ff00; font-weight:bold; text-decoration:underline; }

/* STYLES FOR MY FRIENDS-BOX & MY FANS-BOX */

/* STYLES FOR RSS-BOX & TEASER-BOX */
.boxcontent { font-size:12px; color:#003399; }
#teaserbox ol li { font-size:12px; color:#003399; }

/* STYLES FOR NAV BAR */
#mainnav table td a:hover { font-size:12px; background-color:transparent; color:#ffff00;

font-weight:bold; text-decoration:underline; }
#subnav a,#subnav a:visited { font-size:11px; color:#ffcc33; font-weight:bold;

text-decoration:none; }
#subnav a:hover { font-size:11px; color:#66ff00; font-weight:bold;

text-decoration:underline; }

4. Klik SAVE, dan VIEW profile anda yang baru.
Nah sekarang anda telah mempunyai Friendster Profile yang tidak lagi standar. Kalau ingin merubah lebih jauh, ikuti langkah-langkah berikut.

5. Kalau anda ingin merubah gambar yang menjadi background, edit saja bagian ini:

/* MASTER BACKGROUND */
body { background-color:transparent;
background-image:url(http://www.bintangmerah.com/images/Core/daisy.jpg);

Gantilah image:url(http://www.bintangmerah.com/images/Core/daisy.jpg);
dengan url tempat anda menyimpan gambar yang akan dijadikan background. Atau pilihlah salah satu dari gambar yang ada pada (http://www.bintangmerah.com/images/Core/............) pada list berikut ini, dan
gantilah file daisy.jpg dengan file yang anda pilih.

6. Apabila ingin merubah total tampilan dari profile anda, dapat dilakukan pada situs: http://www.editfriendster.com atau dilakukan di Friendster sendiri di:
http://www.friendstersupport.com/.
Saran penulis lakukan di www.editfriendster.com, karena respons nya lebih cepat dan fasilitasnya lebih banyak.

7. Apabila dilakukan di www.editfriendster.com, lakukan langkah-langkah berikut ini:

• Masuklah kedalam situs www.editfriendster.com
• Klik: CSS RE-LOADER
• Paste kode CSS tadi kedalam text field yang disediakan.
• Klik: RE-LOAD FRIENDSTER CODE
• Scroll kebawah untuk melihat setting yang di-set oleh kode CSS tadi. Setting ini dapat anda rubah sekehendak hati. Tetapi perhatikan kalau menggunakan transparency, gambar background yang terlalu ramai akan membuat profile anda sukar untuk dibaca. Begitu pula warna font yang kurang kontras dengan background akan membuat orang malas untuk membacanya.
• Klik: GENERATE
• Copy – Paste kode yang di-generate kedalam text field di Advanced users di Friendster.
• Klik: SAVE dan VIEW Profile anda yang baru.

Selamat mencoba.

39269 Reads

Merubah tampilan profile Friendster | Log-in or register a new user account | 0 Comments

Comments are statements made by the person that posted them.
They do not necessarily represent the opinions of the site editor.