TWEAK FS (newbie only)

Selamat Pagi/Siang/Malam para member FA tercinta semua.

Di sini, saia ingin memberi tutorial dasar bagi para newbie.
Karena masih banyak beberapa org awam yg tidak mengerti bagaimana cara mentweak FSnya.
Sehingga kadangkala kita menemukan para newbie yang salah posting.
Dan menanyakan cara-cara mengedit FS mereka.

Oleh sebab itu, saia ingin membagi sedikit penjelasan dasar.
Kepada para newbie/anggota baru d FB.
Mengenai cara tweak FS dengan CSS dan JS.

Bagaimana cara mentweak FS kita?
Dengan menggunakan CSS atau dengan variasi JS. =)

Apa itu CSS dan JS?
CSS = Cascading Style Sheet .
Quote dari web--Sebuah dokument yang digunakan untuk mendesain atau mengatur tampilan tata letak sebuah halaman web, CSS ini bersifat embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML. Sebagai Contoh embeded seperti di bawah ini <h1 class=”header”>Pengantar</h1>.

Dengan CSS ini, kita bisa mengontrol/mengatur seluruh tampilan halaman web dengan hanya sebuah dokument CSS, biasanya ekstensi untuk file CSS adalah .css (dot css).

Jadi pada dasarnya CSS itu untuk desain tampilan layout profile kamu.
Misalnya : BackGround (BG) image, warna font, jenis font, warna border, dll.

JS=JavaScript.
Quote dari web--JavaScript adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.

JS bisa ditambahkan ke tweak FS kamu jika ingin menambah beberapa macam fungsi, spt mp3 player, whos viewed me (wvm), slideshow, guestbook, IP tracker, chatbox, dll. (Banyak sekali JS dengan berbagai fungsi yg bisa ditemukan di ftalk dan FTI.)

Langkah-Langkah Mentweak FSmu dengan CSS.

Untuk lebih gampangnya silahkan buka Notepad kamu.

Untuk kode dasar CSS.
Kamu bisa ke profile editor di bawah ini :
:arrow:Edit Friendster
:arrow:Friendster-Tweakers

Di sana kamu akan dapat basic CSS kode.
Dimana navigation bar, google ads, dan hal2 lain masih akan nongol di profile kamu.
Jika tidak ditambahkan kode2 CSS lain.

Copy semua code yang kamu dapat setelah generate di editor itu ke Notepad-nya.

Contoh kode yg kamu dapat setelah digenerate:

Code:

/* michael's friendster profile editor v4.1 */
/* http://www.editfriendster.com */

/* PAGE BACKGROUND */
body {
  background-image: url(http://images.friendster.com/images/homebg.gif);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #ffffff;
  cursor: ;
}
/* MASTER BOXES */
.commonbox {
  border-color: #ffffff;
  background-color: #000000;
}
/* MASTER HEADERS */
.commonbox h1, .commonbox h2 {
  color: #ffffff;
}
/* CONTROL PANEL: BOX */
.controlpanel {
  background-color: #000000;
}
/* CONTROL PANEL: USER PHOTO */
.controlpanel .imgblock200 {
  border-color: #ffffff;
}
/* CONTROL PANEL: DATA */
.data a {
  text-decoration: ;
}
/* CONTROL PANEL: MORE ABOUT ME LINK */
a.more {
  text-decoration: ;
}
/* CONTROL PANEL: BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
  font-family: Arial, Sans-serif;
  text-decoration: ;
}
#controlPanelButtons a:hover {
  font-family: Arial, Sans-serif;
  text-decoration: ;
}
/* MISC: TESTIMONIALS/REVIEWS TEXT */
.data {
  font-family: Arial, Sans-serif;
  color: #;
  text-transform: ;
}

Setelah itu save dengan nama sesuka hati kamu, misalnya : terserah.css
Format filenya harus .css

Nah jika ingin menghilangkan banner, navigation, footer, google ads. =D
Kamu bisa lihat kode2nya di sini.

Magic Code Untuk CSS Extension

Contohnya lagi jika kamu menambahkan beberapa kode CSS untuk menghilangkan bagian atas profile kamu.
(navigation, dll)

Code:

/* michael's friendster profile editor v4.1 */
/* http://www.editfriendster.com */

/* PAGE BACKGROUND */
body {
  background-image: url(http://images.friendster.com/images/homebg.gif);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #ffffff;
  cursor: ;
}
/* MASTER BOXES */
.commonbox {
  border-color: #ffffff;
  background-color: #000000;
}
/* MASTER HEADERS */
.commonbox h1, .commonbox h2 {
  color: #ffffff;
}
/* CONTROL PANEL: BOX */
.controlpanel {
  background-color: #000000;
}
/* CONTROL PANEL: USER PHOTO */
.controlpanel .imgblock200 {
  border-color: #ffffff;
}
/* CONTROL PANEL: DATA */
.data a {
  text-decoration: ;
}
/* CONTROL PANEL: MORE ABOUT ME LINK */
a.more {
  text-decoration: ;
}
/* CONTROL PANEL: BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
  font-family: Arial, Sans-serif;
  text-decoration: ;
}
#controlPanelButtons a:hover {
  font-family: Arial, Sans-serif;
  text-decoration: ;
}
/* MISC: TESTIMONIALS/REVIEWS TEXT */
.data {
  font-family: Arial, Sans-serif;
  color: #;
  text-transform: ;
}

/* Kode-kode yang ditambahkan */

/* FriendsterMagic - remove top banner */
.banner_ad_fix{display:none;}

/* FriendsterMagic - remove logo */
#logo {display:none;background:transparent;}

/* FriendsterMagic remove search form*/
#search {display:none;background:transparent;}
#search form {display:none;background:transparent;}

/* FriendsterMagic - hide the connection box */
.meettrail{display:none;background:transparent;}

/* FriendsterMagic - hide google ads */
#content_14 {display:none!important;}

/* FriendsterMagic - hide report abuse */
#reportabuse{display:none;}

/* FriendsterMagic - remove featured sponsor */
#marketing_bg{display:none;background:transparent;}

Setelah itu kamu save lg..
Jangan lupa dengan format .css

Tentu saja jika kamu copy dan paste kode CSS yang telah ditambahkan kode CSS untuk menghilangkan bagian atas di bagian Customize CSS profile kamu. (Edit Skin > Customize CSS Box)
Maka hanya beberapa kodenya saja yg jalan. Kode untuk menghilangkan Google Ads tidak akan jalan.

Oleh sebab itu, di sini kita akan menggunakan CSS linker.





Sebelumnya, kamu register dulu di www.badwaresite.www
Langsung sajah ke sini Sign Up Ripway Account

Setelah kamu register.
Klik My Files.

http://s4.tinypic.com/idw4n6_th.jpg

Kemudian Upload Files.

http://s4.tinypic.com/2aeuh3d_th.jpg

Setelah itu, kamu browse file CSS yang kamu edit di Notepad tadi.

http://s4.tinypic.com/ng4yo4_th.jpg

Dan klik Upload.

http://s4.tinypic.com/15p0dn6_th.jpg

Setelah itu kamu akan melihat file terserah.css tadi yg sudah terupload.

http://s4.tinypic.com/259ih74_th.jpg

Note:
Jika kamu ingin mengedit atau menambahkan kode2 CSS lagi.
Kamu tinggal klik Edit Text.

http://s4.tinypic.com/2cfskyp_th.jpg

Setelah berhasil mengupload file CSS tadi.
Kamu copy URL CSS kamu.

http://s4.tinypic.com/2a94ow1_th.jpg

Dan untuk menginjeksi file CSS kamu tadi. (external CSS)
Kamu pakai yang namanya CSS linker.

Code:

<STYLE TYPE='text/css'>@import url(URL OF CSS);</STYLE>

Langkah-Langkah Mentweak FSmu dengan JS.

Untuk lebih gampangnya silahkan buka Notepad kamu.
sama seperti cara2 diatas....
hanya bedanya nanti pada penamaan filenya..
klo yang JS... ekstensinya harus .txt atau .js