Mengedit Tampilan Friendster

Siapa bilang mengedit tampilan Friendter itu sulit. Ya sebenernya mesti tahu HTML dan CSS dulu. Tapi sekarang semenjak banyak orang yang berbaik hati di internet jadi nggak sulit lagi, terutama bagi yang nggak tahu code HTML. Di pencarian google jika kita mencari kata "friendster layout" maka anda dapat menemukan banyak sekali situs - situs penyedia jasa ubah layout profil yang lebih di kenal dengan Theme untuk blog dan pada situs jejaring sosial lebih dikenal dengan istilah Layout. Tapi yang paling saya sukai adalah http://www.freecodesource.com/friendster-layouts/ karena situs mempunyai banyak layout keren untuk HTML terutama friendster. Untuk tutorialnya mungkin anda dapat ikuti melalui situs satu ini: http://www.freecodesource.com/friendster-layouts/ .


1. Pada menu layout anda bisa pilih pilih layout yang anda suka. Misalnya seperti gambar di bawah ini. Jika anda suka layout yang di tampilkan, pilih saja dengan mengklik gambar layout tersebut.



2.Cari lokasi dimana tertulis CODE FOR LAYOUT: dan copy saja codenya

CODE FOR LAYOUT
<br /> body {background-image: url(http://img.freecodesource.com/friendster-layouts/images/layouts/1205090548-312-0.gif); background-attachment: fixed; background-position: bottom right; background-repeat: repeat-y; background-color: #1a1a1a; cursor:}<br />.usercontent {color: #0099ff}<br />.usercontent a {color: #66cc33}<br />.usercontent a:link {color: #66cc33; color: #66cc33}<br />.usercontent a:visited {color: #66cc33; color: #66cc33; color: #66cc33}<br />.usercontent a:hover {color: #66cc33; color: #66cc33; color: #66cc33; color: #66cc33}<br />.usercontent a:active {color: #66cc33; color: #66cc33; color: #66cc33; color: #66cc33; color: #66cc33}<br />.usercontent a:hover {color: #ff3399}<br />.commonbox {background-color: transparent}<br />.commonbox .evenrow {background-color: transparent}<br />.commonbox h1 {color: #ff0000; text-transform: uppercase; background-color: transparent}<br />.commonbox h2 {color: #ff0000; text-transform: uppercase; background-color: transparent; color: #ff0000; text-transform: uppercase; background-color: transparent}<br />.controlpanel {background-color: transparent}<br />.controlpanel .imgblock200 {border-color: #66cc33}<br />.controlpanel .q {color: #0099ff}<br />.controlpanel .data {color: #66cc33}<br />.data a {text-decoration:}<br />a.more {text-decoration:}<br />#controlpanelbuttons a {font-family: Arial, Sans-serif; color: #ff3399; border-color: #1a1a1a; background-color: #1a1a1a; text-decoration:}<br />#controlpanelbuttons a:link {font-family: Arial, Sans-serif; color: #ff3399; border-color: #1a1a1a; background-color: #1a1a1a; text-decoration:; font-family: Arial, Sans-serif; color: #ff3399; border-color: #1a1a1a; background-color: #1a1a1a; text-decoration:}<br />#controlpanelbuttons a:visited {font-family: Arial, Sans-serif; color: #ff3399; border-color: #1a1a1a; background-color: #1a1a1a; text-decoration:; font-family: Arial, Sans-serif; color: #ff3399; border-color: #1a1a1a; background-color: #1a1a1a; text-decoration:; font-family: Arial, Sans-serif; color: #ff3399; border-color: #1a1a1a; background-color: #1a1a1a; text-decoration:}<br />#controlpanelbuttons a:hover {font-family: Arial, Sans-serif; color: #ff0000; border-color: #1a1a1a; background-color: #1a1a1a; text-decoration:}<br />.data {font-family: Arial, Sans-serif; color: #; text-transform:}<br />.commonbox .imgblock75 {background-color: #0099ff}<br />.ir {background-color: #0099ff; background-color: #0099ff}<br />.commonbox .dr {background-color: #1a1a1a}<br />.data {color:#ff3399}<br />

3. Nah layout sudah kita dapatkan , selanjutnya ke lokasi TKP . Friendster maksudnya.

4. Kalau nggak bisa masuk, ya mesti login dulu, kemudian pilih menu tab My Profil >> Edit Profil.

5. Kita sudah masuk pada edit profil, selanjutnya pilih tab Customize cari lokasi textarea untuk Customize CSS. Kemudian pastekan code yang tadi anda copy dari http://www.freecodesource.com/friendster-layouts/ kedalam textarea tersebut

Kira-kira begini tampilannya.

---------------------------------------------------------------------------

Advanced Customization

Customize CSS

You can easily customize your profile page using the CSS editor supplied by our trusted partner. After creating your CSS using the editor, copy and paste the generated CSS code into the input box below.Prefer to make the changes to the CSS directly? No problem. Simply click the Download CSS file link below, edit and paste your new CSS in the input box below.
Download CSS file | Customize with CSS editor

/* {--friendster-layouts.com css code start--} */ /* Basic CSS Editor 1.1 - FRIENDSTER-TWEAKERS.COM */ /* PROFILE BACKGROUND */ body { background-image:url(http://photos-265.friendster.com/e1/photos/56/29/17359265/1_282121717l.jpg); background-attachment:fixed; background-position:bottom right; background-repeat:no-repeat; background-color:#000000; } /* GLOBAL FONTS */ .usercontent { font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color:#ff99cc; } /* GLOBAL LINKS */ .usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:active { text-decoration:underline; color:#ff99cc; } .data a, a.more, .commonbox .viewall { font-family:Verdana, Arial, Helvetica, sans-serif; color:#ff99cc; } .usercontent a:hover { text-decoration:overline; color:#ff9999; } /* GLOBAL HEADERS */ .commonbox h1, .commonbox h2 { font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color:#ff99cc; background-color:#ffcc99; } /* GLOBAL BOXES */ .commonbox { border-width:3px; border-style:solid; background-color:#000000; } /* TESTIMONIALS EVEN ROW */ .commonbox .evenrow { background-color:#000000; } /* PRIMARY PHOTO BORDER */ .controlpanel .imgblock200 { border-color:#ffffcc; } /* DATA / LABELS */ .data, .controlpanel .q { color:#ffff99; } /* BUTTONS */ #controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; color:#ff99cc; border-color:#ffffff; background-color:#000000; } #controlPanelButtons a:hover { color:#ffcccc; border-color:#ffffff; background-color:#000000; } /* PHOTO BLOCKS */ .commonbox .imgblock75, .ir { border-width:3px; background-color:#000000; } /* FRIENDS NAME BG */ .commonbox .dr { background-color:#000000; } /* {--friendster-layouts.com css code end--} */

---------------------------------------------------------------------------

Catatan: "kalau textarea masih kosong langsung paste saja, tapi kalau belum sebaiknya di hapus sampai kosong baru kemudian di paste code layout"

6.pilih tombol save untuk menyimpan editan.

SELAMAT PROSES MENGANTI TAMPILAN FRIENDSTER ANDA TELAH SELESAI.
Jika ingin menganti warna, gambar background, bikin tulisan berjalan, pokoknya membuat halaman anda beda dari yang lain dan pastinya buatan anda sendiri. anda dapat lanjutkan melalui komentar saja.

Ayo ketahuan mau ninggalin halaman ini, sebelum ninggalin wajib kasih comment dulu