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 :D 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 :D )

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&amp;boxtag=7146&amp;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&amp;boxtag=7146&amp;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!



52 Responses to “Friendster Overlay Layout”  

  1. 1 Kang Kombor

    Makasih Mas, Anang. Ketoke rodo ribet… Aku mumet bacanya.

  2. 2 roffi

    weleh, inilah yag ditunggu2.. hebat ..makasih..

  3. 3 Randy

    mas kalu yg buat blogger d blogspot d buat artikel nya juga donk mas…..thx.

  4. 4 Adi Suryono

    Wah tanda tangan sama cap jempol bukannya redundant? hehehe

  5. 5 Suya Lynx

    ^_^ 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 ^_^

  6. 6 Anonymous

    good job!!
    thanx banged mas…
    kibarkan kreasi… :D

  7. 7 Agunk

    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..

  8. 8 Anonymous

    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

  9. 9 Anonymous

    sayang sekali mas anang tinggal di surabaya, coba di bandung..
    mau les privat donk..

    salam kenal mas..

    GGBzzzz@yahoo.co.id

  10. 10 Randy

    mas aku kurang ngerti.scriptnya itu di tempatkan di mana nya aku kurang mengerti

  11. 11 thenmustputut

    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..

  12. 12 Anonymous

    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

  13. 13 panca

    mas aq kan masih pemula…

    tolong dong kasih lebih detail..

    plz…

    by pnc

  14. 14 aryo

    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.

  15. 15 North Sun

    Mas saya sudah coba kok tetap ndak bisa ya.Kalau bisa dibikin tutorialnya pake PDF gimana.

  16. 16 FARLEY

    kalo mau masukin/upload lagu kesukaan kita ke friendster gimana mas?
    kayak di myspace gitu deh..
    ajarin dongg…
    plese deh…

  17. 17 FARLEY

    mas kalo mau masukin file music ke profil FS kita gimana caranya?
    kayak di myspace gitu

  18. 18 Anonymous

    yuuk kunjungi friendsternya dhao woods

  19. 19 Anonymous

    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

  20. 20 Anonymous

    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

  21. 21 Anonymous

    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

  22. 22 Chio

    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

  23. 23 made_ali_syafar

    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

  24. 24 made_ali_syafar

    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

  25. 25 bagus

    bagus banget nih,cocok buat yang mau buat overlay sendiri.makasih atas infonya ya mas

  26. 26 Anonymous

    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

  27. 27 dinopati

    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..

  28. 28 gw @neh
  29. 29 susan_chaniago

    mas koq link http://www.markyctrigger.com/og_standard.html
    ga bisa di buka sih??

  30. 30 Anonymous

    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……………….

  31. 31 Anonymous

    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 !!!!!

  32. 32 ade

    Salam kenal mas!
    saya mau minta tolong diajarkan membuat blog dari langkah pertama atau dari dasar sekali. Tolong ya mas………….Thanksssssssssssss!

  33. 33 Anonymous

    akuw bingung ????

    bukannya jelas malahan nambah parah?

    mas, bisa ngasih contoh tampilannya ga abis di edit gitu??

  34. 34 basket

    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!

  35. 35 NO

    ide bagus bos…
    ada contohnya FSyang sudah di edit blom bos…

  36. 36 Anonymous

    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…

  37. 37 Anang

    contoh profil friendster yang sudah memakai friendster overlay layoutnya ini bisa dilihat disini

    http://www.friendster.com/anangku

  38. 38 gaduh_pribadi

    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 ^_^

  39. 39 marvin

    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….

  40. 40 marvin

    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….

  41. 41 capedeh

    hm….
    kenapa mas cumn bisa nyontek sih?

    tidak mempublikasikan beberapa beberap web yg mas ambil
    seperti markyctriger.com

    hm…

  42. 42 Winnie Ar

    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!!!!!

  43. 43 Anonymous

    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

  44. 44 rendi

    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 …^^

  45. 45 aldo

    mas,,makasi ya atas ilmunya :)

  46. 46 frie

    mas anang, aQ coba kok g bisa y
    kirimi tutorialnya yang jelas n komplit ke emailQ dunk
    nnda_frie@yahoo.com
    PLLLLLLLLLLLLLLiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiSSSSSSSSSSSSSSSSSSSSSS

  47. 47 indra

    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

  48. 48 acha

    makasih ya mas wat panduannya…

    insya allah aku ngerti hehe…

  49. 49 jimmy

    fl4hQR fw831f64td9glse934dkjga

  50. 50 shakti

    waduuh……
    ternyata rumit juga yach……jadi agak ngeper neh mas…..
    walah….bantuan nya mas anang di tunggu banget neh……

  51. 51 black_rose

    mas anang,..
    ada contoh friendter overlay yang langsung jadi ga???
    jadi tinggal dicopy gitu,..
    ribet bgt bacanya nie,..
    binggung juga,..
    tolog ya masss,…. :)

  52. 52 jaren

    xky8PS dfv078fnw8f934ndvkg2l

Leave a Reply