Cara Tweak Friendster

Tweak Friendster {Membuat layout FS menjadi lebih menarik}

Selamat Pagi/Siang/Malam para blogger tercinta semua.

Di sini, saia ingin memberi tutorial dasar mentweak FS bagi anda sekalian
Karena masih banyak beberapa org awam yg tidak mengerti bagaimana cara mentweak FSnya. Mentweak FS adalah membuat layout kreasi sendiri dengan menggunakan bahasa pemograman css ataupun js(javasript). Kamu jangan beranggapan bahwa dalam membuat layout FS sendiri itu SULIT. Sebenernya mudah, banyak kuk situs-situs yang menyediakan cara dalam membuat layout FS karya kamu sendiri. Asalkan kita mau terus belajar dan terus belajar .
Kamu bisa ke profile editor di bawah ini :
Edit Friendster
Friendster-Tweakers
Kamu dapat memilih background untuk layoutmu sendiri, bahkan foto kamu juga dapat digunakan sebagai backgrounnya
Di sana kamu nantinya 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.

Oleh sebab itu, saia ingin membagi sedikit penjelasan dasar. kepada kamu sekalian
Mengenai cara tweak FS dengan CSS dan JS.

Simak Baik-Baik !!!

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

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

Pengantar

.

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.
Bingung yah ????????
Okey…ni ak kasih gambaran tweak FS


Gmn…. Masih bingung
yawdah siap-siap beli obat sakit kepala dulu. Soalnya nie bakalan tambah rumit soalnya /hehehe
kalo masih penasaran klik aja sini
okey…kita mulai

Langkah-Langkah Dasar Mentweak FSmu dengan CSS.

Untuk lebih gampangnya silahkan buka Notepad kamu dulu
Kamu bisa ke profile editor di bawah ini :
Edit Friendster
Friendster-Tweakers
Atur sedemikian hingga layout yang kamu inginkan...
Kalo gk bingung cara edit layoutnya klik aja cini
Copy semua code yang kamu dapat setelah generate di editor itu ke Notepad-nya.

Contoh kode yg kamu dapat setelah digenerate:

/* 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: ;
}

ituw cuma sebagai contoh low.....

Nah jika ingin menghilangkan banner, logo, navigation, footer, google ads photo gallery, fan of, group, .dll.

Perhatikan perbedaan antara CSS code dan JS code.
Biasanya kalo JS code itu lebih ribet.

Contohnya lagi jika kamu menambahkan beberapa kode CSS untuk menghilangkan bagian atas profile kamu. (menghilangkan banner, logo, navigation, footer, google ads)

/* 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;}

kode itu ditaruh di bawah....

trus ntar jadinya seperti ini...

/* 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

Kemudian jangan kamu paste kode itu di bagian Custome CSS kamu...

Tentu saja jika kamu copy dan paste kode CSS yang telah ditambahkan kode CSS untuk menghilangkan bagian atas dan kemudian kamu taruh 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.
Apa itu CSS linker ?? (buat ngelink-kan code css kamu, jadi kode css kamu harus di upload dulu)

Cara Meng-upload file CSS

Upload file CSS kamu Sebelumnya,
kamu register dulu di ripway.com
Langsung sajah ke sini Sign Up Ripway Account

Setelah kamu register.


Klik My Files.


Kemudian Upload Files.


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


Dan klik Upload.

Kemudian klik Return to My Files untuk kembali ke root awal.


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


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

Dan untuk menginjeksi file CSS kamu tadi. (external CSS)
Kamu pakai yang namanya CSS linker klik cini. nha disini gunannya CSS linker !!
Misal tadi nama file css adalah terserah.css
dan url na adalah http://h1.ripway.com/abc/terserah.css
(dengan ekstensi CSS )

masukin url css ke generator nya

n tros klik tombol Generate na ya ..
yg selanjutnya kode akan digenerate , dan akan didapetin alert box yg nandain bahwa kode udah selesai digenerate :

!!! Kode yg digenerate, dr waktu ke waktu akan beda2 ,
jadi gapapa koq kalo kode yg didapetna beda dari contoh diatas !!!!
Tutup alert box , block/tandain seluruh kode yg ada digenerator dan kopi kode na

Sekarang login ke friendster , dan buka halaman Edit Profile
Pilih Cuztomize Profile tab ..

Kamu copy dan paste CSS linker yg sudah berhasil digenerate
ke Media Box / about me / i want to meet (biasanya tergantung dari CSS linker itu sendiri)


Klik Save

Semoga berhasil ya ... :-Z

Kalo code na ga berhasil, ada 2 kemungkinan :
- ada yg salah dalam kode di javascript atau CSS na (kode2na agak sensitip sih)
- Friendster baru aja ngeblock kode linker yg didapetin dari Generate linker

Solusi buat yg ga jalan :
- cek dg teliti kode dalam CSS atau javascriptna dan untuk awal pakai dulu kode yg sederhana
- kalo masalahna kode diblock >> cari aja di GOOGLE dengan keyword “Linker CSS” cz dr waktu ke waktu linker akan berubah-rubah

Huhh….akhirnya selesai juga
Okey mungkin cukup sekian tutorial yang dapat saya sampaikan, untuk tutorial tweak FS dengan JS nanti menyusul cz ak jg masih dalam taraf belajar /he. Semoga dapat bermanfaat !!