Selamat Pagi/Siang/Malam para member fti tercinta semua. :rose: Di sini, saia ingin memberi [b]tutorial dasar[/b] bagi para newbie. Karena masih banyak beberapa org awam yg tidak mengerti bagaimana cara men[b]tweak[/b] 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 fti. Mengenai [u]cara tweak FS[/u] dengan CSS dan JS. [hr][hr][hr] [b]Bagaimana cara mentweak FS kita?[/b] Dengan menggunakan [u]CSS[/u] atau dengan [u]variasi JS[/u]. [hr] [b]Apa itu CSS dan JS?[/b] [color=blue][b]CSS = Cascading Style Sheet .[/b][/color] Quote dari web--[i]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).[/i] Jadi pada dasarnya CSS itu untuk desain tampilan layout profile kamu. Misalnya : BackGround (BG) image, warna font, jenis font, warna border, dll. [hr] [color=blue][b]JS=JavaScript.[/b][/color] Quote dari web--[i]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.[/i] 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.) [hr][hr][hr][hr] [quote][b][color=red]Langkah-Langkah Mentweak FSmu dengan CSS.[/b][/color][/quote] Untuk lebih gampangnya silahkan buka [b]Notepad[/b] kamu. Untuk kode dasar CSS. Kamu bisa ke profile editor di bawah ini : [url=www.editfriendster.com]Edit Friendster[/url] [url=http://friendster-tweakers.com/tools/friendster-editor/]Friendster-Tweakers[/url] Di sana kamu akan dapat basic CSS kode. Dimana navigation bar, google ads, dan hal2 lain masih akan nongol di profile kamu. [i]Jika tidak ditambahkan kode2 CSS lain.[/i] [b]Copy[/b] semua code yang kamu dapat setelah [i]generate[/i] di editor itu ke [b]Notepad[/b]-nya. Contoh kode yg kamu dapat setelah digenerate: <">Setelah itu save dengan nama sesuka hati kamu, misalnya : [b]terserah.css[/b] Format filenya harus [b].css[/b] Nah jika ingin menghilangkan [b]banner, navigation, footer, google ads[/b]. Kamu bisa lihat kode2nya di sini. [url=http://theftalk.com/t10469-Compilation-Hide-Codes-%28CSS-Codes%29.html]Compilation of Hide Codes (CSS Codes)[/url] [url=http://theftalk.com/t7694-Complete-Compilation-Codes%21.html]Complete Compilation of CSS Codes![/url] [url=http://theftalk.com/t8106-%26%239827%3B-Magic-Code-Untuk-Extension-%26%239827%3B-%28for-newbie%29.html]♣ Magic Code Untuk CSS Extension ♣ (for newbie)[/url] Untuk variasi kode CSS lain, kamu bisa ke [b][url=http://theftalk.com/f4-Friendster-Tricks-Tutorials.html]Tricks and Tutorials[/url].[/b] [quote][i]Perhatikan perbedaan antara CSS code dan JS code. Biasanya kalo JS code itu lebih ribet. Dan baca juga dari [b]author-thread[/b] jika dibilang itu CSS code baru bisa kamu copy di file CSS kamu. [/i][/quote] Setelah kamu memilih kode2 CSS tweak dari link2 di atas. Kamu tambahkan di file notepad tadi, [b]terserah.css[/b] Contohnya lagi jika kamu menambahkan beberapa kode CSS untuk menghilangkan bagian atas profile kamu. (navigation, dll) <">Setelah itu kamu save lg.. Jangan lupa dengan format [b].css[/b] 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 [b][color=blue]CSS linker[/color].[/b] [hr][hr] Sebelumnya, kamu register dulu di [url]ripway.com[/url] Langsung sajah ke sini [url=http://ripway.com/signup.asp]Sign Up Ripway Account[/url] Setelah kamu register. [quote][img]http://i275.photobucket.com/albums/jj302/yuna4farplane/01.jpg[/img][/quote] Klik [b]My Files.[/b] [quote][img]http://i275.photobucket.com/albums/jj302/yuna4farplane/02.jpg[/img][/quote] Kemudian [b]Upload Files.[/b] [quote][img]http://i275.photobucket.com/albums/jj302/yuna4farplane/03.jpg[/img][/quote] Setelah itu, kamu browse file CSS yang kamu edit di Notepad tadi. [quote][img]http://i275.photobucket.com/albums/jj302/yuna4farplane/04.jpg[/img][/quote] Dan klik [b]Upload.[/b] [quote][img]http://i275.photobucket.com/albums/jj302/yuna4farplane/05.jpg[/img][/quote] Setelah itu kamu akan melihat file [b]terserah.css[/b] tadi yg sudah terupload. [quote][img]http://i275.photobucket.com/albums/jj302/yuna4farplane/06.jpg[/img][/quote] Kemudian klik [b]Return to My Files[/b] untuk kembali ke root awal. [quote][img]http://i275.photobucket.com/albums/jj302/yuna4farplane/08.jpg[/img][/quote] [i]Note: Jika kamu ingin mengedit atau menambahkan kode2 CSS lagi. Kamu tinggal klik [b]Edit Text.[/b][/i] [quote][img]http://i275.photobucket.com/albums/jj302/yuna4farplane/07.jpg[/img][/quote] Setelah berhasil mengupload file CSS tadi. Kamu [b]copy [/b] URL CSS kamu. Dan untuk menginjeksi file CSS kamu tadi. [i](external CSS)[/i] Kamu pakai yang namanya [b]CSS linker.[/b] [quote][color=red]Lihat bagian bawah post ini untuk [b]LINKER TERBARU[/b]. [/color][/quote] Kamu copy dan paste CSS linker yg sudah berhasil digenerate ke [b]Media Box.[/b] [quote][img]http://i275.photobucket.com/albums/jj302/yuna4farplane/09.jpg[/img][/quote] Klik [b]Save[/b] dan Selamat kamu telah berhasil mentweak FS kamu dengan CSS! [hr][hr][hr][hr] Setelah ituh. [i]**bagian paling susah. tp gag akan susah lg jika kamu belajar. [/i] Kalau kamu ingin menambah fungsi JS. Kamu bisa ke tutorial [b]Bang Kanal.[/b] dan [b]Sis Anna.[/b] dan [b]Mickyriora[/b] untuk penjelasannya. [url=http://theftalk.com/t15339-%7BTUTORIAL%7D-Kombinasi-Addbox-%28UPDATE-08-03-08%29.html]Kombinasi Addbox dan JS[/url] [url=http://theftalk.com/t8003-Eksternal-File.html]JS & CSS Eksternal File[/url] [url=http://theftalk.com/t15088-Compiling-javascripts-file.html]Compiling Javascripts File[/url] Untuk menambah fungsi2 JS lainnya. Kamu bisa langsung ke sini untuk lebih lengkapnya.. [quote][color=green][b][url=http://theftalk.com/t23092-FTalk-Indonesia-Index-Directory-%5BCategorical%5D.html]FriendsterTalk Indonesia Indeks/Direktori[/url][/b][/color][/quote] [hr][hr][hr][hr] [color=green][b]:: FROM TRICKS AND TUTORIALS SECTION ::[/b][/color] [b]Javascript functions explained by marfillaster:[/b] [url]http://theftalk.com/viewtopic.php?id=5163&p=1[/url] [b]Random Photo Gallery by Feruzz:[/b] [url]http://theftalk.com/t16330-Random … ED%5D.html[/url] [b]Friends Randomizer by Marfillaster[/b] [url]http://theftalk.com/viewtopic.php?id=5764&p=1[/url] [b]Quick Message Box[/b] [url]http://theftalk.com/viewtopic.php?id=3626&p=1[/url] [b]AntiPoser Cbox With Smilies[/b] [url]http://theftalk.com/t8446-AntiPos … dated.html[/url] [b]Vertical Slide in your Friends Box[/b] [url]http://theftalk.com/viewtopic.php … 96&p=1[/url] [b]addNewBox.HTML Function by Feruzz[/b] [url]http://theftalk.com/t7930-addNewB … 28Nov.html[/url] [b]Marfillaster's addBox gen.[/b] [url]http://h1.ripway.com/mumbhaki/addBoxGenerator.html[/url] [b]Loading trick for all browser by Ezil2007:[/b] [url]http://theftalk.com/viewtopic.php?id=9412&p=1[/url] [b]Enterpage trick by Tazmaine...I'm going to link you to xavierkym's post since his is updated smile[/b] [url]http://theftalk.com/t6652-another … works.html[/url] [b]Viewer's Main Photo by Feruzz:[/b] [url]http://theftalk.com/viewtopic.php?id=9141&p=1[/url] [b]Photo Gallery Slide by mdirwan:[/b] [url]http://theftalk.com/t5696-Change- … MAGE..html[/url] [b]Force log-in script:[/b] [url]http://theftalk.com/t2535-Force-script.html[/url] [b]Moving box contents by Feruzz:[/b] [url]http://theftalk.com/t2052-Moving-Content.html[/url] [b]wvmcbox mode by Feruzz:[/b] [url]http://theftalk.com/t3117-CBOX-Mode.html[/url] [b]Icon under controlpanel buttons[/b] [url]http://theftalk.com/viewtopic.php?id=5437&p=1[/url] == == == == == = = = = [b]Compilation of Tricks and Tutorials (Sort by Contributors' Name)[/b] [url]http://theftalk.com/t22054-Compilation-Tricks-Tutorials-(Sort-Contributors'-Name).html[/url] [b]Tricks And Tutorial Directory [Categorical][/b] [url]http://theftalk.com/t22065-Tricks-Tutorial-Directory-%5BCategorical%5D.html[/url] [hr][hr][hr][hr] [i]FYI : Kamu bisa menginjeksi file external CSS kamu ke dalam kompilasi JS kamu. Tanpa harus memasukkan CSS linker ke media boxmu. Dengan memasukkan kode di bawah ini di script JS kamu.[/i] [i](Note: Taruh kode ini di bagian paling atas script JSnya)[/i] [quote]//css injection var v=document.createElement('link'); v.rel='stylesheet'; v.media='screen, print'; v.href='[b]CSS_URL[/b]'; navigation.appendChild(v);[/quote] Untuk file JS. Simpan dengan format [b].js[/b] atau [b].txt[/b] Uploadkan di web hosting kamu (ripway.com). Setelah berhasil diupload. Copy [b]URL JS[/b] kamu tadi di JS linkernya. [hr] Cara memasukkan JSnya sama dengan CSS cuman kali ini kita memakai [b]JS Linker[/b]. Copy linkernya dan paste di [b]Media Box[/b]. [hr][hr][hr][hr] [quote][b][color=red]Pengumuman. 24 Maret 2008.[/color] Sehubungan dengan adanya proses Filter Linker. Maka thread mengenai linker akan dipindahkan ke The Backstage (Section khusus Moderators). Kalau ada yang ingin bertanya Linker. Silahkan PM para moderators atau member2 lain yang mengetahui linker terbaru. Atau ke [/b][url=http://theftalk.com/f5-Friendster-Underground.html][b]Friendster Underground[/b][/url][b] untuk informasi Linker terbaru. [color=red]Perhatian :[/color] Linker hanya akan diberikan kepada member2 yang memenuhi syarat di bawah ini : Minimal total post 20. Sudah teregister lebih dari seminggu.[/b][/quote] [hr][hr][hr][hr] [spoiler][color=purple][b]Added info: [u]addBox[/u] = box2 yang ingin kamu tambahkan ke profile kamu dengan memakai kode2 js. pada awalnya addBoxnya misalnya mp3 player berupa kode HTML kemudian digenerate di addBox code generator. nah kode yg digenerate itu yang dicopas ke kompilasi file JSmu. [u]WVM[/u] = singkatan "whos viewed me". kan byasanya cuman bs dilihat scr manual dri Home. kalo pake wvm hosting, itu bisa nongol di profilemu. dengan gambar usernya. dan berbagai modifikasi wvm yg ada. [u]JS injection[/u] = penyisipan script javascript (JS) untuk memanipulasi isi dari suatu web. [u]CSS injection[/u] = penyisipan script CSS untuk mengubah tata desain/layout suatu web.[/b][/color] Untuk term lainnya, jika masih bingung, silahkan ke thread ini. [url=http://theftalk.com/t23618-Confusing-words-or-terms-for-Newbies..html][b]Confusing Term for Newbie[/b][/url][/spoiler] Happy tweaking everyone...

Last edited by Jirichi Ryunashira (2008-09-01 20:41:34)