Catatan:
Ganti kode USERID yang dicetak tebal di atas dengan User ID Friendster anda yang berupa angka-angka. Misalnya URL Friendster anda http://www.friendster.com/99999999 maka User ID Friendster anda adalah 99999999.

Nah, bagi anda yang belum memulai membuat desain sendiri anda bisa mencoba dengan kode HTML yang sangat sederhana ini untuk awalan alias percobaan. (Tapi bagi yang sudah berhasil mendesain sendiri anda bisa memakai kode HTML dari web profil friendster buatan anda sendiri tersebut. Ini yang bener, bukan percobaan lagi!)

Kode Telah Berhasil!!!!!

Langkah selanjutnya adalah masuklah ke situs ini, dan akan tampil kotak-kotak dan petunjuk-petunjuk seperti gambar di bawah ini.

Step 1, masukkan kode HTML profil friendster desain kita sendiri tadi (atau bagi yang belum bikin, bisa kopi paste kode HTML yang sangat sederhana di atas untuk percobaan) ke dalam kotak yang paling atas pada gambar di atas, kemudian klik tombol GENERATE. Lalu, pada kotak yang di bawah akan muncul kode hasil generate. Copy paste semua kode tersebut ke dalam kotak Friendster Profile Customization bagian Add Media. Setelah itu klik Save untuk menyimpan. Setelah selesai tersimpan, cobalah melihat profil friendster anda, rasakan bedanya!

Profil Friendster Overlay anda akan muncul segera beberapa detik setelah halaman asli friendster anda telah ter-load, dengan catatan browser anda tersupport dengan plugin flash. (Sepanjang saya mencoba, profil friendster overlay saya bisa muncul setelah kurang lebih 5 detik sampai 1 menit setelah halaman profil friendster yang asli muncul, tergantung kecepatan internet )

Oiya, berikut ini adalah daftar beberapa Overlay Add-Ons yang bisa anda gunakan untuk kelengkapan friendster overlay layout anda:

Auto Update Testimonials

Kode di atas akan menampilkan testimonial anda pada kode HTML anda, letakkan pada sebarang tempat dimana anda ingin menampilkan testimonial anda. Anda bisa mengedit bagaimana tampilan dari testimonial dengan menggunakan kode CSS. Berikut ini style CSS untuk testimonial yang saya gunakan: (Anda bisa merubah huruf, warna dan ukuran huruf dan gambar)

#aut{width:100%; font-size:8.5pt; font-family:Verdana; color:#333333; padding:0px 5px 0px 5px; overflow:hidden;}
/** pics **/
.imgblock75 img{width:50px; overflow: hidden; border:#586278 2px solid !important; margin-right:5px !important;}
.itd{vertical-align:top;}
/** testimonial contents **/
.dtd{padding-bottom:5px; margin-bottom:5px; font-size: 8.5pt; font-family:Verdana; color:#333333;}
/** names **/
.title a:visited{text-decoration:none; color:#003399;} .title a:link{text-decoration:none; color:#003399!important; font-size:8.5pt; font-weight: bold;}
.title a:hover{color:#FF0000!important; text-decoration: none; font-weight: bold;}
/** view all and add a testimonial links **/
.viewall a{padding-bottom:5px; text-align:center;}
.viewall a:hover{color:#FF0000;}
.viewall{text-align:center!important;}
h2{display:none;}
.data li{list-style-type:none;}
.data{padding:0; margin:0;}

Auto Update Comment:

Anda bisa merubah tampilan dengan menggunakan CSS juga.

Who Viewed Your Profile (Cbox mode)
Daftar di http://cbox.ws kemudian anda akan mendapatkan kode dari Cbox.
Contoh kode dari Cbox yang anda dapatkan adalah sebagai berikut:

Ubah kode di atas sesuai dengan warnanya:
merah = box id anda
green = box tag anda
blue = hapus kode yang berwarna biru, tidak terpakai
pink = ganti cboxmain menjadi cboxmainche

Tambahkan kode di bawah ini di sebarang tempat dalam tag anda

Sekarang pilih Module anda, ada dua module pada Cbox, yaitu pst dan cstr… Jadi jika anda mencoba melihat profil anda menggunakan account friendster yang lain kemudian jika ada kotak peringatan yang berbunyi “Enter a message”, maka yang harus anda lakukan adalah mengganti Module.

Auto Update Shoutout

Anda bisa merubah tampilan Shoutout dengan menggunakan CSS:

Last Login Code/Profil Viewer Code

Auto Update Main Photo

Auto Update Friends

Anda bisa merubah tampilan dengan menggunakan CSS:
/** images **/
.ir img {height:75px; width:75px; overflow: hidden; border:#9bcfe7 2px solid;}
.ir a:hover img {filter:alpha(Opacity=50,FinishOpacity=0,Style=0);}
/** caption **/
.dr a {font-family: century gothic, verdana; font-size: 10px; text-align: center; text-decoration: none; color: black;}
.dr a:hover {font-weight: bold;}
.flogriditem {padding-bottom: 5px; padding-top: 5px;}

Featured Friends

Auto Update Groups