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

Atau anda bisa melihat referensi dari contoh overlay layout yang telah ada. Contoh-contoh desain dan layout friendster overlay profile yang sudah jadi dan tinggal pakai (diedit sedikit-lah di bagian USERID [angka-angka kode fs kita!])... Klik link dibawah untuk melihat-lihat contoh desain layout friendster yang menarik sesuai dengan pilihan anda:
http://www.markyctrigger.com/forum/index.php#7

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

MENDESAIN FRIENDSTER OVERLAY LAYOUT DENGAN OG++

Atau anda bisa mencoba OG++. Anda bisa mencobanya disini. Kelebihan dari OGplus ini adalah anda bisa mengedit file overlay anda tanpa harus memasukkan lagi kode-kode di media section friendster anda. Karena anda diharuskan untuk mengupload kode tersebut di file hosting, semisal geocities atau googlepages. Nah, cara ini terbukti efektif untuk menanggulangi update terbaru dari friendster untuk memblokir overlay friendster ini. Hehehehe... Silahkan mencoba deh! Saya sarankan anda untuk menggunakan OG++ ini saja... Ikuti aja langkah2 yang ada disini. Dan taraaa... Friendster Overlay Layout anda akan muncul lagi...

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

Contoh-contoh desain dan layout friendster overlay profile yang sudah jadi dan tinggal pakai (diedit sedikit-lah di bagian angka-angka kode fs kita!)...
http://www.markyctrigger.com/forum/index.php#7

Selamat mencoba!

UPDATE 1 NOV 2008
Langkah terbaru Overlay Layout OGfinal. Ini adalah cara terampuh yang masih bisa digunakan sampai sekarang!!!!!!! Langkah-langkahnya cukup sederhana dan simple.... Silahkan baca disini.....
http://anangku.blogspot.com/2008/11/friendster-overlay-layout-ogfinal.html