JS & CSS Eksternal File

KOSTUMASI DG FILE EKSTERNAL

credits untuk sir ArchAngel buat JS Linker na

..klik aja gambar di bawah buat bikin js linker na ya …

Eksternal File adalah file eksternal yg disimpan di luar friendster.com , yg akan meng-override/nimpa seting tampilan FS asli ; dengan me-link eksternal file tsb ke FS.

Sebelum bisa memilliki file di hosting site yg akan dipakai, pd umumnya kita akan diminta untuk membuka account sendiri. (disini diberi contoh dg menggunakan ripway.com untuk keperluan eksternal file)

1. Membuat Account di Host Site dan Membuat File Eksternal secara Online

Untuk membuat account baru di ripway.com,  klik http://ripway.com/signup.asp

Setelah account terbuat :

Login ke account ripway.com  baru tersebut  dan kemudian pilih My Files di menu utama

Gambar a

Pada halaman selanjutnya , lihat di sebelah kanan atas, dan dapat dipilih Create Text File , untuk memulai membuat file eksternal.

Gambar b

yg mana akan didapatkan , semacam notepad online spt gambar berikut ; dimana kode2 untuk memodifikasi FS akan dimasukan disini :

Gambar c

2. Memasukan kode CSS dan membuat file eksternal CSS.

Kode CSS adalah kode2 yg dipakai untuk mengatur tampilan dari halaman web.
Contoh kode CSS yg dipakai dalam modifikasi FS , misalnya :

Code:

#logo{display:none}

Masukan kode diatas ke online notepad tadi

Gambar d

Beri nama file dg ekstensi CSS (ekstensi CSS berarti dibelakang nama harus dikasih .CSS), misalnya beri nama file dengan nama kode_css.CSS

Gambar e

dan klik tombol Save yg terletak di sudut kanan bawah dari online notepad ini, untuk nge-save file.

Page akan berubah kembali ke tampilan MyFiles, dg tambahan 1 file CSS yg baru kita save.

Gambar f

—————————————————————————————————————————-
Bagian2 yg mungkin perlu diketahui, pada file yg telah dibuat :

Gambar g

- Link Edit : akan diperlukan ketika akan modifikasi kode yg telah ada dlm file ybs.
- URL File  : letak file di host site, yg akan dipakai ketika file ini mulai di link dg file lain
——————————————————————————————————————————

Sampai dengan ini , udah dipunyai 1 file CSS, dg kode untuk menghilangkan bagian logo FS , di profile Friendster.

Langkah selanjutnya , adalah melink file CSS di atas , ke file eksternal javascript.

3. Membuat file Eksternal Javascript secara online

Klik lagi link Create Text File , sama spt pada gambar b diatas
untuk mulai membuat file eskternal JS

Masukin kode berikut untuk , menghubungkan/nge-link file css dg javascript yg akan dibuat  (kode berikut adalah juga salah satu contoh dari kode javascript):

var css = document.createElement(“link”);
css.type = “text/css”;
css.rel = “stylesheet”;
css.href = “URL CSS“;
css.media = “screen, print”;
document.getElementsByTagName(“head”)[0].appendChild(css);

ganti URL CSS dg url file CSS yg tadi baru dibuat
( dalam contoh nama file adalah kode_css.css
dan url file css adalah http://h1.ripway.com/FiendsterTalkIndon/kode_css.css )

Gambar h

yg akhirna kode yg dimasukin di notepad baru adalah :

var css = document.createElement(“link”);
css.type = “text/css”;
css.rel = “stylesheet”;
css.href = “http://h1.ripway.com/FiendsterTalkIndon/kode_css.css“;
css.media = “screen, print”;
document.getElementsByTagName(“head”)[0].appendChild(css);

Gambar i

Setelah kode dimasukin, serupa dg langkah2 pembuatan file eksternal CSS , beri nama file dan save file, dg ekstensi dengan ekstensi TXT
(pada contoh , file diberi nama kode_jsna.JS)

karena seringkali friendster memfilter esktensi JS , jadi sebaikna sih :

!!! pemberian nama js file sebaiknya dg ekstensi TXT  >> contoh nama file: kode_jsna.TXT

Gambar j

Sekarang dah dipunyain 1 file JS (dg url na) n 1 file CSS yg udah pada ngelink

Gambar k

n langkah terakhir adalah – ngelink file Javascript yg baru dibuat ke Friendster kita

4. Ngelink File Eksternal ke profile Friendster dg JS linker

Untuk ngebuat kode JS linker , bisa diklik gambar di bawah :

credits untuk sir ArchAngel buat JS Linker na

..klik aja gambar di bawah buat bikin js linker na ya …

Misal tadi nama file js adalah kode_jsna.js
dan url na adalah http://h1.ripway.com/FiendsterTalkIndon/kode_jsna.js
(dengan ekstensi TXT ,
maka url yg didapet bakalan http://h1.ripway.com/FiendsterTalkIndon/kode_jsna.TXT )

masukin url js ke generator nya sir ArchAngel

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 http://friendster.com/editprofile.php
Pilih Cuztomize Profile tab .. (http://www.friendster.com/editskin.php?)

Paste kode yg tadi dr generator  ke bagian Media Box

dan klik tombol Save , yg terletak di paling bawah

Kembali ke profile FS na , refresh n liat efek , di mana untuk contoh di sini
harusna seh  logo friendster na ilang

CONTOH2 KODE :
kode2 js   –>http://friendstertalk.com/t15339-TUTORI … 12%29.html
kode2 css –>http://friendstertalk.com/t8106-%26%239 … ie%29.html

Semoga berhasil ya …

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 generatorna sir angel
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 >> terus cek di FTI, kalo2 ada code yg baru