Friendster Overlay Layout
Bagi anda yang sudah mulai jenuh dengan profil friendster anda yang biasa-biasa saja, kini anda dapat membuat tampilan profil friendster anda menjadi lebih menarik sesuai keinginan dan kreasi anda sendiri. Pada posting kali ini, saya akan mencoba sedikit menguraikan bagaimana langkah-langkah untuk membuat profil friendster overlay layout (Maaf mas Danang baru sekarang di posting
hehe).
Pada dasarnya membuat profil overlay pada friendster ini prinsipnya sama dengan membangun halaman web sendiri. Dalam proses pembuatannya kita bisa menggunakan desain web HTML, XHTML, JAVASCRIPT, DHTML, atau bahkan kita bisa menyisipkan web FLASH yang ditanam dalam HTML, nyaris tanpa batasan! Kita pun bisa menggunakan media Dreamweaver, MS Frontpage, dan HTML editor lainnya dalam membuat desain profil friendster overlay tersebut, tergantung kemampuan kita…
Kemudian desain web yang telah kita buat tersebut akan tampil meng-cover-i halaman profil friendster semula, proses ini lebih umum dikenal dengan deface. Sehingga profil friendster yang akan muncul adalah halaman web yang telah kita buat tadi. (Keren bukan?)
Nah jika anda tertarik anda bisa memulai membuat desain profil friendster sendiri. Berikut ini adalah langkah-langkahnya:
Seperti yang telah dijelaskan pada uraian di atas, jelas sekali bahwa langkah pertama yang mutlak dan harus kita lakukan adalah membuat desain web sendiri sebagai tampilan halaman profil friendster kita nanti. Dan berikut ini adalah kode atau tautan yang terdapat pada halaman profil friendster asli yang bisa anda gunakan (sangat disarankan):
Navigasi Utama
Home -> http://www.friendster.com/home.php
My Profile -> http://www.friendster.com/user.php
My Friends -> http://www.friendster.com/friends.php
Explore -> http://www.friendster.com/explore.php
Search -> http://www.friendster.com/gallery.php
Video -> http://www.friendster.com/video.php
Review -> http://www.friendster.com/reviews/
Blogs -> http://www.friendster.com/blogs.php
Groups -> http://www.friendster.com/group/mygroup.php
Invite -> http://www.friendster.com/invite.php
Navigasi Lainnya
What’s New -> http://www.friendster.com/splash.html
My Messages -> http://www.friendster.com/messages.php
Settings -> http://www.friendster.com/editaccount.php
Help -> http://www.friendster.com/custhelp.php
Log Out -> http://www.friendster.com/logout.php
Navigasi Profil
Add As Friend -> http://www.friendster.com/addfriendrequest.php?uid=USERID
Send Message -> http://www.friendster.com/sendmessage.php?uid=USERID
Forward to Friend ->http://www.friendster.com/referafriend.php?refer=USERID
Add Testimonial -> http://www.friendster.com/testimonials.php?action=add&uid=USERID
Add Bookmark -> http://www.friendster.com/bookmarks.php?action=add&uid=USERID
Send a Smile -> http://www.friendster.com/sendmessage.php?uid=USERID&action=sendsmile
Invite to Group -> http://www.friendster.com/group/inviteone.php?uid=USERID
Add Comment -> http://www.friendster.com/publiccomments.php?uid=USERID
Lihat Semua
View All Comments -> http://www.friendster.com/publiccomments.php?uid=USERID
View All Testimonials -> http://www.friendster.com/testimonials.php?uid=USERID
View All Friends -> http://www.friendster.com/friends/USERID
View All Photos -> http://www.friendster.com/photos/USERID
Jangan lupa untuk memasang logo Friendster (http://images.friendster.com/images/logo-whitebg.gif) dan memasukkan kode original footer Friendster di bawah ini supaya tidak di banned dari Friendster, OK?
<div id=”footer_container”><div id=”footer” class=”applicationWrapper”>
<a href=”/info/index.php?statpos=footer”>About Us</a> |
<a href=”/info/contacts.php?statpos=footer”>Contact Us</a> |
<a href=”/affiliate.php?statpos=footer”>Promote My Profile</a> |
<a href=”/custhelp.php?statpos=footer”>Help</a> |
<a href=”/info/tos.php?statpos=footer”>Terms of Service</a> |
<a href=”/info/privacy.php?statpos=footer”>Privacy Policy</a><div style=”margin-top: 5px !important;”>Copyright 2002-2007 Friendster, Inc. All rights reserved. U.S. Patent No. 7,069,308 & 7,117,254</div>
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!)
<html>
<head>
<title>Percobaan</title>
</head>
<body>
Kode Telah Berhasil!!!!!
</body>
</html>
Langkah selanjutnya adalah masuklah ke situs ini, dan akan tampil kotak-kotak dan petunjuk-petunjuk seperti gambar di bawah ini.
/** Step 1 adalah kopi paste kode HTML di bawah ini, kemudian tambahkan kode tersebut pada kotak “Describe Who You Want to Meet“.
&<script>lt;script src=http://breakdance.freepgs.com/sundel/OGS.js&<script>gt;&<script>lt;/script&<script>gt; **/
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
<div id=AUT style=”width:250; height:650; overflow: scroll”></div>
<script language=javascript>
autotesti=”yes”;
</script>
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:
<script language=”javascript”>
AUC=”activate”;
</script>
<div id=”AUCstore” style=”width:545px; height:350px; overflow:auto;”></div>
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:
<!– BEGIN CBOX - http://www.cbox.ws –>
<div align="center" id="cboxdiv">
<iframe frameborder="0" width="160" height="305" src="http://www.cbox.ws/box/?boxid=791167&boxtag=7146&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmainche" style="border:#DBE2ED 1px solid;" id="cboxmainche"></iframe><br>
<iframe frameborder="0" width="160" height="75" src="http://www.cbox.ws/box/?boxid=791167&boxtag=7146&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe>
</div>
<!– END CBOX –>
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 <body> anda
<script language="javascript">
boxid=your box id;
boxtag=your box tag;
wvcbox="yes";
wvcboxmodule="The Module";
</script>
<div id="wvcboxel" style="display:none"></div>
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
<script language=javascript>
AUSO=”yes”;
</script>
<div id=AUSOid></div>
Anda bisa merubah tampilan Shoutout dengan menggunakan CSS:
<style type=”text/css”>
#AUSOid{ font-family:”Comic Sans MS”; font-size:18px; color:#999999}
</style>
Last Login Code/Profil Viewer Code
<script language=”javascript”>
lastlogin=”yes”
</script>
<div id=”lastloginid”></div>
Auto Update Main Photo
<script language=”javascript”>
automainphoto=”yes”
</script>
<div id=”automainphotoid”></div>
Auto Update Friends
<script language=”javascript”>
autofriend=”yes”
</script>
<div id=”autofriendid” align=center class=column_content style=”width:200px; height: 300px; overflow:auto;”></div>
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
<script language=”javascript”>
featF=”yes”;
</script>
<div id=”featFid”></div>
Auto Update Groups
<script language=javascript>AUG=”yes”;</script>
<div id=”AUGid”></div>
Selamat mencoba!
Contoh Friendster yang sudah memakai Friendster Overlay Layout:
http://www.friendster.com/anangku
Dan berikut ini tampilan friendster overlay saya (dengan catatan browser anda disupport plugin flash) :
Jika masih bingung… Coba masuk ke forumnya langsung aja disini
http://www.markyctrigger.com/forum
Atau ke situsnya disini
http://www.markyctrigger.com
Selamat mencoba!
Filed under: Uncategorized |










Makasih Mas, Anang. Ketoke rodo ribet… Aku mumet bacanya.
weleh, inilah yag ditunggu2.. hebat ..makasih..
mas kalu yg buat blogger d blogspot d buat artikel nya juga donk mas…..thx.
Wah tanda tangan sama cap jempol bukannya redundant? hehehe
^_^ makasi banyak akhirnya ada juga yg nyediakan link² yg dperlukan buat overlay
oh ya bisa ajarin juga cara buat layout blogspot yg sudah terlanjur di upgrade ke new blogger [ga bisa edit css lagi sebebas yg dulu]
sekalian sama script atau cara buat file tree kaya di bagian kanan blog mas anang ^_^
good job!!
thanx banged mas…
kibarkan kreasi…
Salam kenal mas, dulu saya fs nya juga pake overlay, cm karena malah bikin ribet dan loadingnya lama akhirnya fs saya di “polos” kan saja..hhehehe..
hi anang lam kenal dari ADI
aq cuma mau nanya gimana cara kamu membuat situs ini ajrin donk
sesama pencinta teknologi harus berbagi ilmu
kamu bisa kirim jawaban kamu ke adi_2903@yahoo.co.id atau aulialampung@yahoo.com ok
aq ucapkan terima kasih kl kamu mau berbagi cara membuat situs blog kaya punya kamu okyyy balaz yach
sayang sekali mas anang tinggal di surabaya, coba di bandung..
mau les privat donk..
salam kenal mas..
GGBzzzz@yahoo.co.id
mas aku kurang ngerti.scriptnya itu di tempatkan di mana nya aku kurang mengerti
wah… tambah puyenx..
bisa dijelasin ke bahasan agak ringkas..
misal tinggal copy paste gitu…
benerceh bisa buat blajar,
tapi kebanyakan ada yang suka dengan hal-hal instant
-lam kenal ya mas..
nuwun SBY kulo saking malang mas bade tanglet kedik :).
mas semua comment dah aku laku in dan fs na dah aku tunggu sampai sekitar 5 menit tapi kenapa kok gak isa berubah olay na, apa pengaruh html ku, coz aku bikin e dari ms.front page5.0, mohon bantuan nya^^, lek sempet kirim mas yo nang se_tiy0@yahoo.co.id
mas aq kan masih pemula…
tolong dong kasih lebih detail..
plz…
by pnc
salam kenal mas, aku pengen nanya gimana caranya bikin blog, karena saya juga pengen jad blogger. ini alamat email saya mas : aryoster@gmail.com
bagi temen2 yang dh bs ngeblog sharing ilmunya donk.
thanks.
Mas saya sudah coba kok tetap ndak bisa ya.Kalau bisa dibikin tutorialnya pake PDF gimana.
kalo mau masukin/upload lagu kesukaan kita ke friendster gimana mas?
kayak di myspace gitu deh..
ajarin dongg…
plese deh…
mas kalo mau masukin file music ke profil FS kita gimana caranya?
kayak di myspace gitu
yuuk kunjungi friendsternya dhao woods
aduh,puyeng aku mas..pengen coba-coba sech tapi waktu sempit bgt…
aku mau8 buat kreasi sendiri sama friendsterku tapi alhasil berantakan..ntar aku coba deh saran mas..salam kenal yac mas
alow…
Tnx bgt ini yang ak cari. Aku ni ter masuk anak kecil yang baru mau belajar, untung ad guru kayak mas Anang he..
ribet si ga mudeng ju, tapi bole ju di coba.
klo buat web kaya mas anang ni gmn yach?? bagi ilmu dung….
aku tunggu lho…
tar kirim jah mail na di
de_tic@yahoo.co.id apa di sheika_chan@yahoo.co.uk
tnx b4
ummm…..
gimana caranya bwat blog/website di Fs???
kLo tau, jawab aja di emailQ:
sasuke_gangster@yahoo.co.id
or Fs
desperado_shinobi@lazier.bgt
thax
mas Anang iku nek ngupload hasil’e sing wis di gawe nang ngendi mas…
lho kan iku podo karo desain dewe to?
nah aku sik bingung iku upload’e
lha terus koyo’ images, dan css bawaan kita mau taruh di mana?
jadi tambah bingung
step-stepnya tulung di jelasin yo!!! yo kulo nyuwun tulung mas…
matur nuwun
lha inggih kulo saking malang, sa’iki wonten madiun lagi tugs. thanks
bisa minta tolong juga untuk email ke
roniwahyu@yahoo.com
roniwahyu@gmail.com
mas Anang saya masih belum ngerti tolong perjelas lagi langkah2 nya mas..,.,.,terimakasih atas info nya
kirim aja ke alamat email saya
mainstreemoflove@gmail.com
mas Anang saya masih belum ngerti tolong perjelas lagi langkah2 nya mas..,.,.,terimakasih atas info nya
kirim aja ke alamat email saya
mainstreemoflove@gmail.com
bagus banget nih,cocok buat yang mau buat overlay sendiri.makasih atas infonya ya mas
mas nanya donk. FSku ngga bisa tampilin ccsnya…yang ketampil malah tulisan programnya..baik untuk background atau untuk comment.help dok.lewat e-mail aja ya makasih
wah mas fS saya malah gak bisa dibuka ne mas?tolong bisa bantu mas,atau saya yg salah masukin ya gak sesua petunjuk mas anang?terakhir yg bisa muncul idnya:
http://www.friendster.com/user.php?statpos=bc&uid=27227637,
tolong ya mas anang..
susah amat seh penjelesannya…
nih..
http://www.markyctrigger.com
http://www.friendstermagic.com
http://www.friendstertalk.com
mas koq link http://www.markyctrigger.com/og_standard.html
ga bisa di buka sih??
wah keren abis…… aq juga dah bisa ko bikinnya…. pi masih dalam tahap uji coba… coz pagenya lom sepenuhnya kelar…
Makasih ya Mas atas infonya…..
btw kalo mau liat…..
aq kasih id fs Q sys86@lycos.com
kalo dah liat jangan kaget ya……………….
hi mas anang…
waah gue jadi smangad nee…
liat blognya mas yg ok punya…
btw cara2 n script yang digunaain apaa ajaa…
ajarin ya….
dan lagi gimana cara buat animasi pada judul web n footernya???
gue pnasaran banget mas….coz gue masih newbie disini….
oh ya mas ada YM gag???
n tolong kasih tau caranya ya di sky_insider@yahoo.com
gue tunngu mas….
sukses slalu buat Mas deeh…..
n TTp SMangAd !!!!!
Salam kenal mas!
saya mau minta tolong diajarkan membuat blog dari langkah pertama atau dari dasar sekali. Tolong ya mas………….Thanksssssssssssss!
akuw bingung ????
bukannya jelas malahan nambah parah?
mas, bisa ngasih contoh tampilannya ga abis di edit gitu??
bosss iframe udah gak bisa digunain di profile dan comment friendster hik hik, jadi ini udah gak bisa dipakai http://cbox.ws
sialan friendster, mudah2an bangkrut!
ide bagus bos…
ada contohnya FSyang sudah di edit blom bos…
wah….
lengkap ney kayak’y punya mas anang…
segala ada….
aq kan lagi mau edit FS aq….
aq liat petunjuk dari mas biar lebih OK, geto……
ANNIE…
contoh profil friendster yang sudah memakai friendster overlay layoutnya ini bisa dilihat disini
http://www.friendster.com/anangku
wah suwun cak…tapi kok rodo njlimet…maklum newbie…..bisa kirim step2nya yg lebih detail gk mas…trus yg bagus pake apa buat editnya frontpage/dreamweaver.
Thx sebelumnya
step2nya yg lebih detail kalo berkenan kirim ke gaduh_pribadi@yahoo.com
suwun cak anang ^_^
saran ne…gimana klo script yg dibahas jg dikasih contoh tampilannya, y biar lebih mudeng…..
trz saya coba edit cbox sperti contoh anda tp kenapa tidak bisa termuat dl fs saya…..tolong bantuannya….
bila berkenan tolong di replay ke er-vee@hotmail.com
makasih….
saran ne…gimana klo script yg dibahas jg dikasih contoh tampilannya, y biar lebih mudeng…..
trz saya coba edit cbox sperti contoh anda tp kenapa tidak bisa termuat dl fs saya…..saya bingung, script tsb ditaruh dimana???tolong bantuannya….
bila berkenan tolong di replay ke er-vee@hotmail.com
makasih….
hm….
kenapa mas cumn bisa nyontek sih?
tidak mempublikasikan beberapa beberap web yg mas ambil
seperti markyctriger.com
hm…
misi mas!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
TOLONG DIJAWAAABBB PLIIISS!!
misalnya niiihh,,,kita kan ke
http://www.friendstertalk.com
trus qta dapet kode layout overlay yg panjaaaaaaaaaanggg bgd!!!!
itu ditaro dimana sih???
masa di CSS??
terus J.s itu apa??
Mohon BANTUANNYA!!!!!
mas anang aku ingin bertanya tentang layout overlay setiap maintance fs
apa hrs sering di update juga layout ya dan apa saja yang hrs diubah setiap waktu tolong bls ke e-mail saya
http://www.titan_omega1992@yahoo.co.id
Assalamu alaikum….
mas blognya keren aq sampai ngga bosen bener mmm aq aga bingung soal overlay friendster bisa di jarin ke aq,,, n kenapa kok aq harus login dulu…
makasih wassalamu alaikum …^^
mas,,makasi ya atas ilmunya
mas anang, aQ coba kok g bisa y
kirimi tutorialnya yang jelas n komplit ke emailQ dunk
nnda_frie@yahoo.com
PLLLLLLLLLLLLLLiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiSSSSSSSSSSSSSSSSSSSSSS
mas aq coba cara yang diatas tadi kok yang muncul malah huruf yang banyak dibawah add medianya di profile aq, pada hal aq dah generate code hasil design web ku yang di design dulu di dreamwaver, mohon bantuannya ya klo mas sempet tolong kirim tutorial atau caranya dalam bentuk pdf sedetailnya nya ya mas, terimakasih sebelumnya
makasih ya mas wat panduannya…
insya allah aku ngerti hehe…
fl4hQR fw831f64td9glse934dkjga
waduuh……
ternyata rumit juga yach……jadi agak ngeper neh mas…..
walah….bantuan nya mas anang di tunggu banget neh……
mas anang,..
ada contoh friendter overlay yang langsung jadi ga???
jadi tinggal dicopy gitu,..
ribet bgt bacanya nie,..
binggung juga,..
tolog ya masss,….
xky8PS dfv078fnw8f934ndvkg2l