Friendster Overlay Layout

pelajaran gmn cara membuat overlay layout pada friendster
Yang pertama sih, bagi saya yang wajib harus bisa adalah, tau dan dan bisa membuat tampilan web dengan html script, kalok belm tau ya belajar sana dulu.

Setelah itu silahkan kalian membuat halaman web menggunakan HTML, kreasikan pikiran kalian, buat halaman semenarik mungkin.

Yang perlu kita perhatikan adalah script tautan/ atau bisa di sebut tombol link jangan lupa di sertakan pada halaman yang kalian buat tadi, misalkan halaman yang wajib, atau ga di kasih sih juga gpp adalah :

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 katanya orang2 sih biar ga di ban sama sananya?
<div id=”footer_container”><div id=”footer” class=”applicationWrapper”>
<a href=”/info/index.php?statpos=footer” mce_href=”/info/index.php?statpos=footer”>About Us</a> |
<a href=”/info/contacts.php?statpos=footer” mce_href=”/info/contacts.php?statpos=footer”>Contact Us</a> |
<a href=”/affiliate.php?statpos=footer” mce_href=”/affiliate.php?statpos=footer”>Promote My Profile</a> |
<a href=”/custhelp.php?statpos=footer” mce_href=”/custhelp.php?statpos=footer”>Help</a> |
<a href=”/info/tos.php?statpos=footer” mce_href=”/info/tos.php?statpos=footer”>Terms of Service</a> |
<a href=”/info/privacy.php?statpos=footer” mce_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.

setelah halaman yang kita disain sudah siap untuk di tampilakan, proses selanjutnya ialah kunjungi 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  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 Add media di dalam custumize friendster kita

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.

Ini adalah beberapa Add on yang perlu juga di tambahkan pada halaman friendster yang telah kita bikin tadi

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 kalian , letakkan pada sebarang tempat dimana tempat yang ingin kalian pasang testimonial kalian. kalian bisa mengedit bagaimana tampilan dari testimonial dengan menggunakan kode CSS. Berikut ini style CSS untuk testimonial :

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

Auto Update Shoutout
<script language=javascript>
AUSO=”yes”;
</script>
<div id=AUSOid></div>

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

untuk Add on yang lain bisa di kunjungi materi add on pada blog ini, thank’s to blog yang laen yang menjadi inspirasi. thank’s to pada tmn2 yang baca, dan berpikir ini q ngopy

kalok ga puas, cari tutor yang laen aja

10 Tanggapan

  1. saya masi bingung di copy pastenya letakinnya di sebelah mana?? gua gua coba kok ga ada perubahan

  2. setelah code di generate, copykan hasilnya di “Add Media”
    gt, ngerti kan

  3. bagaimana hendak hide testimonial / comments dlm friendster?

  4. kalau memakai teknik overlay, ya untuk code add on testimonial tidak di ikutsertakan pada halaman baru friendster.
    friendster dengan teknik overlay, kita bikik halaman baru yang kita disain sendiri, dan kita masukin apapun yang kita inginkan. kalau ingin ga ada testimonialnya, ya tidak di beri kode testimonial, gampang kan

  5. nggak ngefek

  6. setelah code html di generate, copykan hasil generate code di friendster —-edit profile—-customize—-add media.

  7. itu code utk testi dan comment nya yg terbaru y ?
    bukannya testi dan comment uda disatuin skrg ?

  8. mohon maaf jika mengganggu, mohon bantuan nih, gimana jika copy paste script pake wordpress? soalnya aku bingung banget susah cari dimana paste html di wordpress. atas penjelasannya terima kasih. suwuuuuuun.
    mohon kirim ke emailku
    suny_che@yahoo.co.id

  9. wooiiii…..carana buka tetimonials untuk menghack fs tuch gmn sich…..?????

  10. makasih ya atas infio_@

    gua dah mulai da gambara n3 g mna cara buat fs overlay

    maklum gua baru bekajar n3

    maaf ko menggangu!!!

    gua masih banyak buruh bantuan dan bibinganya thanks!!

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: