Seperti website lain pada umumnya, friendster juga menggunakan coding CSS untuk mengatur segala tampilan layout profile friendster penggunanya. CSS sendiri merupakan kepanjangan dari Cascade Style Sheet ini digunakan para webmaster untuk mendesign tampilan layout melalui style elemn yang ada dalam web mereka, mulai dari memformat bentuk dan ukuran text, sampai pada memformat keseluruhan layout.

Perkembangan CSS sendiri sudah mulai dikenal dan mendunia pada tahun 1996, yakni saat W3C (World Wide Wb Consortium) menyusun draft proposal untuk membuat css ini dan akhienya mulai berjalan dan banyak diimplementasikan. Keuntungan penggunaan CSS ini adalah akan memudahkan pengguna untuk mengatur elemen style dalam layout website (termasuk profile friendster).

Nah jika kamu tertarik untul lebih mendalami perkenalan dengan CSS ini, maka berikut tersedia tutorial lengkap bagaimana belajar dan menggunakan css dalam mengatur layout. Mengetahui bagaimana struktur css akan semakin memudahkan kita untuk memahami suatu css layout web lain atau bahkan kita bisa membuat sendiri layout kita. Tapi setidaknya meskipun kita tidak mahir css, asalkan kita mengerti maka kita dapat memodifikasi style css layout friendster dan melakukan perubahan-perubahan yang perlu. Tutorial tersebut telah kami sediakan untuk kalian download di link mirror berikut ini. Silahkan download, setiap link download merupakan hasil kompresan zip secara independen bukan merupakan hasil split. Silahkan..

http://d.turboupload.com/d/2068384/csstutorial_uploaded_friendstermod_1.zip.html
http://d.turboupload.com/d/2068387/csstutorial_uploaded_friendstermod_2.zip.html
http://d.turboupload.com/d/2068388/csstutorial_uploaded_friendstermod_3.zip.html
nah Ini sama cuman mirror
http://rapidshare.com/files/60077501/csstutorial_uploaded_friendstermod_1.zip
http://rapidshare.com/files/60077685/csstutorial_uploaded_friendstermod_2.zip
http://rapidshare.com/files/60078642/csstutorial_uploaded_friendstermod_3.zip
Selamat belajar... Read more | Baca lagi

Ingin agar tampilan Friendster layout kamu terlihat lebih keren dan menarik? Selain kamu mengoptimalkan design layout profile friendster kamu dengan menggunakan CSS, kamu juga butuh sedikit sentuhan animasi dengan menggunakan Javascript (js extension). Tutorial berikut ini akan memberikan implementasi penggunaan js extension (Java script) pada profile friendster agar layout cantikmu semakin keren.

Kita akan menggunakan animasi gelembung (buble cursor) pada cursor kamu. Kebanyakan para friendsterholic hanya merubah tampilan cursor standart berupa anak panah menjadi tangan yang sedang menunjuk. Padahal itu juga sebenarnya standar windows loh jika cursor menyentuh link maka anak panah tersebut akan berubah jadi tangan penunjuk. Jadi kekurangan dari penggunaan cursor bentuk tangan penunjuk ini pada profil friendster adalah akan membingungkan orang lain yang membuka friendstermu. Orang lain yang melihat akan bingung membedakan link aktif atau tidak.

Untuk itu sekarang kita akan gunakan animasi gelembung-gelembung udara yang muncul dari ujung cursor kamu. Apa itu cursor? kalo dari tdai kamu belum tau juga apa itu cursor maka keterlaluan deh. Cursor itu gampangannya adalah penunjuk di monitor yang bergerak-gerak setiap kamu mengarahkan mouse.

Seperti biasa langkah awal buka Notepad kamu (atau text editor lain) kemudian copy-paste-kan kode berikut ini dan "Save as" menjadi java script dengan menambahkan akhiran js extension dibelakan file (contoh; gelembung.js). Mengenai cara bagaimana cara nge-save dan penggunaan JS extension silahkan lihat kembali posting sebelumnya tentang penggunaan java script di friendster.

(kode di atas belum sempurna, baca dulu post ini sampai habis). Setelah kode di atas kamu save menjadi js extension lalu silahkan kamu upload ke file hosting yang support direct hot link kesayanganmu (bisa Ripway, Dompetfoto, Hotlinkfiles, dll) lalu dapatkan kode url link ke file tersebut (contoh: http://dompetfoto.org/files/13/gelembung.js). Nah langkah terakhir kamu tinggal memasukkan url js extension mu tsb ke Friendster (nah lu baca lagi deh tentang cara ini di posting sebelumnya).

Jika ingin mengganti gambar gelembung tersebut dengan gambar lain misalnya fotomu, atau emoticon, smiley, dll.. usahakan ukuran dan dimensi gambar tersebut tidak terlalu besar agar profile friendsterkamu tidak terlalu berat ketika di load di browser. Kalo temanmu yang buka koneksi internetnya kenceng sih gak masalah. Tapi kalo bukanya dari warnet..ya modar deh tuh. Makanya usahakn agar dimensinya dibawah 100x100 px. Cara gantinya cukup kamu upload dulu gambar tersebut di image hosting (imageshack, dompetfoto, tinypic,dll) dapatkan url link-nya lalu buka file gelembung.js tadi lalu cari dan ganti tulisan 'http://url-ke-gelembung.mu/gelembung.gif' yang muncul dua kali di js tersebut, ganti dengan url gambar kamu. simple khan..?

Liat screenshoot berikut:

Nah kalau kamu ingin langsung pakai dan gak perlu lagi edit kode di atas silahkan saja download file js extension nya berikut ini sesuai dengan gambar gelembung yang ingin kamu pakai di layout friendstermu.

http://dompetfoto.org/files/13/gelembung_01.js
http://dompetfoto.org/files/13/gelembung_02.js
http://dompetfoto.org/files/13/gelembung_03.js

download dan masukkan saja js extension di atas ke dalam friendster kamu..selamat menikmati. Read more | Baca lagi

Masih ingatkah kalian tentang posting bagaimana cara menyembunyikan beberapa bagian layout friendster yang tidak terlalu kita inginkan? Nah ini merupakan bagian kedua alias lanjutan dari post tersebut. Layout friendster merupakan tampilan yang banyak diatur lewat kode CSS. Oleh karena itu kode-kode berikut akan menyembunyikan kotak-kotak yang ingin dihilangkan dari tampilan layout friendster dengan menggunakan CSS (bukan js extension loh). Nah langsung aja kita mulai dari cara menyembunyikan kotak foto galery.

Hide Photo gallery box

Sembuyikan Photo Gallery dari layout friendster.

Hide More about you box

Hide Testimonials and comments

Sembunyikan kotak testimonial dan comment dari teman2 kamu (buat apa di sembuyikan ya?). Tapi lumayan juga buat ngurangin space di layout friendster kamu, tampilan lay out friendster kamu jadi lebih simple dan elegan.

Hide Your blogs

Code :
/* Hide Your blogs*/ #blogs_1_3 {display:none!important;}

Hide reviews section

Sembunyikan kolom review.

Code :
/* Hide reviews section */ #reviews_1_4 {display:none!important;}

Hide White bar under navigation

Sembuyikan garis bar warna putih di bawah menu navigasi bagian atas.

Code :
/* Hide White bar under navigation */ #marketing_bg {display:none!important;}

Hide the Home | My Profile | My Connections

Sembuyikan navigasi menu utama yang berisi menu Home, My Profile, My Connection.

Code :
/* Hide the Home | My Profile | My Connections*/ #mainnav {display:none!important;}

Hide Groups Box

Code :
/* Hide Groups Box */ #groups_2_5 {display:none!important;}

Hide Fan of box

Sembunyikan aja kolom ini kalo kamu ingin menunjukkan kalo kamu narsis and gak ngefans sama sapa-sapa.

Code :
/* Hide Fan of box */ #fanof_2_4 {display:none!important;}

Hide the whole top navigation

Sembunyikan seluruh menu atas agar gak nongol.

Code :
/* Hide the whole top navigation */ #navigation {display:none!important;}

Hide the surfer

Code :
/* Hide the surfer */ #surfer {display:none!important;}

Hide hide the divider

Code :
/* Hide hide the divider */ #navdivider {display:none!important;}

Hide Classifieds Jobs

Lagi-lagi sembunyikan iklan

Code :
/* Hide Classifieds | Jobs | */ .secondary_links {display:none!important;}

Hide your Photo gallery's photos

Code :
/* Hide you Photo gallery's photos */ #content_photos_1_2 .flogriditem {display:none!important;}

Hide your featured friends photos

Sembunyikan foto-foto dari teman kamu

Code :
/* Hide your featured friends photos */ #content_friends_2_2 .flogriditem {display:none!important;}

Hide about me parapgraph

Sembunyikan About me.. kalo gak ingin narsis.

Code :
/* Hide about me parapgraph */ .controlpanel p {display:none!important;}

Hide the about me link above recent updates

Code :
/* Hide the about me link above recent updates */ #content_controlpanel_1_1 a.more {display:none!important;}

Hide banner ads on top

Lagi, sembunyikan iklan.

Code :
/* Hide banner ads on top */ .banner_ad_fix {display:none!important;}

Hide the view all link of boxes like comments, testi, and friends

Sembunyikan semua link komentar, testi, dan friends

Code :
/* Hide the view all link of boxes like comments, testi, and friends*/ .commonbox .viewall {display:none!important;}

Hide the headers of all box

Sembunyikan semua judul/title di setiap kotak

Code :
/* Hide the headers of all box */ .commonbox h1, .commonbox h2 {display:none!important;}

Hide your featured friends' names

Sembunyikan nama-nama teman favoritemu.

Code :
/* Hide your featured friends' names */ #content_friends_2_2 .dr {display:none!important;}

Hide the edit link like edit featured friends and edit reviews

Code :
/* Hide the edit link like edit featured friends and edit reviews */ .commonbox .editlink {display:none!important;}

Hide the arrows of your blogs

Code :
/* Hide the arrows of your blogs */ ul.entries li {display:none!important;}

Hide the photos in your testimonials comments

Code :
/* Hide the photos in your testimonials comments */ #content_publiccomments_1_7 .imgblock75 {display:none!important;}

Hide the shoutoutbox

Sembunyikan kolom shouutbox kamu

Code :
/* Hide the shoutoutbox */ #cpShoutoutBox {display:none!important;}

Change the div_id for specific box 2 hide the header

Code :
/* Change the div_id for specific box 2 hide the header*/ #div_id .h2 {display:none!important;}

Hide Control panel box header

Sembuyikan title/judul di kontrol panel kamu

Code :
/* Hide Control panel box header */ #controlpanel_header {display:none!important;}

Hide the spacer

Code :
/* Hide the spacer */ #shimrow {display:none!important;}

Hide Group updates

Code :
/* Hide Group updates */ #content_groups_2_5 .data {display:none!important;}

Hide the whole profile

Sembunyikan seluruh profile

Code :
/* Hide the whole profile */ #flo_wrapper, #footer_container {display:none!important;}

Sebaiknya kalian pikir-pikir dulu sebelum menghilangkan satu atau beberapa bagian di layout friendster kamu. Selamat mencoba.Read more | Baca lagi

Layout friendster terlihat biasa saja?coba pakai kode berikut ini. Tidak masalah jika friendster layout kamu cuma biasa saja dengan tampilan default, tapi jika kamu menggunakan kode berikut ini dijamin teman-teman kamu bakal terheran-heran melihat betapa kerennya layout profile friendster kamu. Kode berikut ini berguna untuk menjadikan layout friendster kamu yang berupa kotak-kotak / kolom-kolom tersebut dapat bergerak-gerak. Kotak apa saja yang dapat bergerak?Beberapa kotak yang dapat digerakkan antara lain: Friends Box, Control panel button, kotak Photo gallery, kolom More about, kolom testimonial / comments, kolom shoutout box, kolom Fan of.., dan kolom Group.

Berikut kodenya, ingat code ini menggunakan Java script (ekstensi .js bukan .css loh). Jadi jangan sampai salah waktu nge-save atau waktu upload dan penempatannya. Untuk itu jika masih belum tau silahkan bolak-balik lagi posting sebelumnya di blog ini tentang bagaimana menggunakan Java script di profile friendster. Berikut kodenya dimulai:

Kode .js di atas lumayan panjang juga jadi jangan langsung meng-copy-paste-kan pada media box loh. Ikuti cara yang sudah kita jelaskan sebelumnya. Sebagai langkah awal buruan siapkan text editor favorite kamu, sebaiknya pake Notepad (windows) atau KNote aja, jangan pakai microshit word loh. Kemudian copy-pastekan kode di atas ke Notepad dan save dengan ekstensi javascript yakni berakhiran .js pada akhir nama file, contoh : "kotak_gila.js".

Karena kode tersebut di atas cukup panjang juga maka berikut kami sediakan link download nya, semua link isinya sama pilih salah satu saja (yang lainnya cuma sebagai backup saja). Klik saja langsung untuk mendownload file yang sudah dalam bentuk js extension.

http://dompetfoto.org/files/13/cssdanjs/kotak_ajaib.js
http://www.hotlinkfiles.com/files/433952_acs9r/kotak_ajaib.js
http://rapidshare.com/files/59384334/kotak_ajaib.js
http://upload2.net/page/download/uwGTJ65H0icfwpn/kotak_ajaib.js.html
http://d.turboupload.com/d/2062028/kotak_ajaib.js.html

Nah jika kamu sudah memiliki file .js nya maka sekarang saatnya kamu memasukkannya pada settingan profile friendster kamu, untuk itu kami tidak akan jelaskan lagi bagaimana caranya. Silahkan baca posting sebelumnya. Selamat mencoba dan semoga berhasil. Sebagai tambahan jika kamu menggunakan .js untuk alert box atau welcome alert. Read more | Baca lagi

Susahnya mendaftar di Ripway sekaang sudah dapat ditemukan alternatif lain untuk mendapatkan jasa layanan Free file hosting yang support direct link. Direct link file hosting meupakan penyedia layanan free storage online yang membolehkan usernya untuk hot linking file yang di-uploadnya. Guna dari hot link adalah dapat mengakses file tersebut secara langsung tanpa melalui gateway page seperti pada Rapidshare. Bagi Friendster mania direct link ini sangat bermanfaat untuk meng-upload file-file style sheet untuk layout friendster maupun juga file-file Java script (.js) untuk memberikan animasi atau tweaking tampilan profile friendster.

Nah sebelumnya kita juga sudah pernah membahas file hosting mana saja yang menyediakan layanan hot link tersebut. Posting berikut ini cuma untuk menambahkan/melengkapi posting sebelumnya. Salah satu penyedia layanan direct file hosting lainnya adalah Dompetfoto.org (http://dompetfoto.org/) yang dulunya hanya menyediakan layanan Free image hosting sekaang sudah menyediakan direct linking file hosting juga. Namun setau kita terakhir kali website tersebut masih beta jadi gak tau apakah sekarang juga masih beta. Namun bagaimanapun juga kita layak untuk mencoba layanan tersebut. Selain kemudahan yang ditawarkan juga karena website tersebut menggunakan bahasa Indonesia yang otomatis lebih memudahkan kita juga dalam melakukan uploading.

Berikut tampilan utama di Dompetfoto:


Beberapa fitur yang cukup kita sukai adalah bahwa user/pengguna dapat dengan mudah melakukan uploading file baik secara single (satu persatu) ataupun multiple (langsung beberapa sekaligus). Yang lebih keren lagi kita juga bisa membuat folder-folder yang dapat diseting untuk pribadi (private) ataupun untuk umum (public) sehingga bisa di akses secara hot link.

Screenshoot waktu membuat folder baru:



Website ini juga menyediakan instant upload buat yang malas login, namun sayangnya fitur ini hanya bisa mengupload file-file gambar (images) seperti foto yang berformat .jpg .jpeg dan .gif saja. Tapi bagaimanapun juga jika kita menggunakan instant upload ini maka kita tidak bisa melacak (stat track) keberadaan file tersebut besoknya, beda jika kita membuat folder sendiri dan melakukan pengaturan penyimpanan kita sendiri. Yah secara umum mirip imageshack kita bisa memilih instant upload atau login dulu. Tapi apa salahnya jika kita mencoba mendaftar sebuah account di Dompetfoto karena selain proses pendaftarannya mudah dan cepat karena hanya perlu mengisi formulir dengan username, password dan alamat email saja (gak njelimet sampai ke alamat rumah koq!!). Selain itu juga kita tidak perlu melakukan aktivasi dengan email konfirmasi yang dikirim ke email kita. Perlunya kita mengisikan alamat email di sini hanya berguna untuk jika suatu saat kita lupa password yang kita gunakan untuk login maka kita bisa melakukan reset.

Layanan ini masih tergolong baru, berikut screenshoot yang tim friendstermod ambil waktu mencoba layanan ini.



Nah cukup jelas dan menarik khan? silahkan coba sendiri praktekkan untuk menyimpan file-file css dan .js extension profile friendster kamu. Read more | Baca lagi

Posting kali ini kita akan memberikan beberapa kode CSS yang bisa digunakan untuk menyembunyikan bagian-bagian tertentu pada tampilan Friendster layout kamu. Ingat ini kode css bukan .js loh, kalian harus tau bedanya (setidaknya dengan melihat aja sudah tau). Dan sekali lagi, tidak ada kepastian sampai kapan kode-kode tersebut masih berfungsi dengan baik karena saking seringnya pihak Friendster meng-update filter code yang diperbolehkan dan yang tidak. Juga tidak semuanya bisa berjalan mulus pada semua browser, sebagian hanya di IE (internet explorer) atau cuma FF (Mozilla FireFox) dan Opera. Tapi bagaimanapun juga silahkan coba dan nikmati sendiri hasilnya.

Oke mari kita mulai saj, berikut daftar kode css untuk sembunyikan bagian tertentu di layout friendster (CSS Hide Codes) :

Hide Navigation Language

Kode sembunyikan Navigasi Language,

Hide Arrows at Main Nav Drop down list

Kode css untuk sembunyikan tanda panah pada menu navigasi (kan bentuknya dropdown tuh).

Hide About me paragraph in control panel

Kode sembunyikan bagian paragraf 'About me' di Control Panel

Code :
.controlpanel p {display:none!important;}

Hide Recent Updates

Kode untuk sembunyikan 'Recent Updates'

Code :
/* Hide Recent Updates */ .user_tracker {display:none!important;}

Hide Google search

Sembunyikan kolom pencarian Google (jarang dipake kali yaa..?).

Code :
#search {display:none!important;}

Hide Friendster Classifieds

Sembunyikan iklan yang suka nongol tuh (padahal dari iklan tsb friendster cari keuntungan, koq disembunyi'in?). Tapi dari pada merusak pemandangan layout friendster kita ya kita buang juga gak apa-apa koq..

Code :
/* Hide Friendster Classifieds */ #marketing {display:none!important;}

Hide Footer

Sembunyikan bagian Footer nya Friendster.. ya tau sendiri lah apa isinya di bagian bawah friendster tuh??

Code :
/* Hide Footer */ #footer_container {display:none!important;}

Hide Footer Link only

Kalo ini cuman link-linknya saja yang disembunyikan, yang bukan link gak dihilangkan.

Code :
/* Hide Footer link only */ #footer a {display:none!important;}

Hide Friendster Logo

Yang ini ampuh nih, bisa sembunyikan logo friendster yang dipojok atas tuh.

Code :
/* Hide friendster logo */ #logo {display:none!important;}

Hide Google Ads sidebar

Yang ini kalau disembunyikan bisa merugikan Friendster nih, mereka cari duit dari iklan padahal.

Code :
/* Hide sidebar google ads*/ #ads_2_3 {display:none!important;}

Hide Messages | Setting | Help | Log out

Sembunyikan bagian Messages, Setting, Help, Logout di bagian atas halaman profile.

Code :
/* Hide Messages | Setting | Help | Log out*/ #subnav_search {display:none!important;}

Hide How you are connected box

Sembunyikan bagian kotak 'Hide How you are connected box'

Code :
/* Hide How you are connected box */ #meettrail_2_1 {display:none!important;}

Hide Media box

Sembunyikan Kotak Media box

Code :
/* Hide Media box */ #scrapbook_1_8 {display:none!important;}

Hide Friends Box

Sembuyikan kotak yang berisi sapa saja teman kamu

Code :
/* Hide Friends Box*/ #friends_2_2 {display:none!important;}

Hide control panel buttons

Sembunyikan tombol Control Panel

Code :
/* Hide control panel buttons */ #controlPanelButtons {display:none!important;}

Masih kurang? tenang ini baru bagian pertama. Sebenarnya masih ada lebih dari setengah yang sudah di atas tapi berhubung tangan sudah capek mijitin keyboard, jadi postingannya akan disambung dengan Hide codes Part 2. Oke. Mengenai kode yang di atas, silahkan pilih saja apanya yang mau dihilangkan, kemudain copy-paste-kan ke bagian kode CSS profile kamu atau ke css extension (kalo eksternal). Read more | Baca lagi

Masih ingatkan dengan cara menggunakan Java Script dalam profile friendster?Nah tutorial berikut ini akan menjelaskan tentang bagaimana memasukkan link ke file CSS dalam JavaScript. Seperti yang kita ketahui bahwa pengertian CSS itu sendiri adalah "Cascading Style Sheets (CSS) styles to define specific HTML tags to format text in specific ways" yang artinya kira-kira sebagai berikut: CSS adalah kepanjangan dari Cascading Style Sheet yang merupakan lembar style yang digunakan untuk mendefinisikan tag html tertentu untuk membentuk format suatu text secara spesifik. Ya intinya css itu sendiri digunakan untuk mengatur dan mengotak-atik tampilan suatu web (dan friendster di sini juga web khan??).

Nah pada friendster jika kamu ingin mengganti-ganti tampilan layout friendster biasanya kamu akan meng-copy-paste-kan kode CSS (yang entah kamu dapat dari mana) ke dalam menu customasi profile di kolom CSS. Nah gak enaknya dari cara ini tiap kamu mau ganti khan harus revert dulu (ada tombol revert di bawah). Sekarang secara terpisah kamu bisa mengikutsertakan CSS ini melalui java script. Lalu bagaimana caranya? itu dia yang akan kita bahas. Seperti biasanya sediakan dulu text editor kamu (Notepad, dll).

[1] Masukkan scipt di bawah ini ke dalam JS extension kamu, atau copy-paste-kan ke Notepad dan save dalam ekstensi Java script (.js) kalo masih bingung baca posting sebelumnya tentang menggunakan Java Script di Friendster.

[2] Siapkan kode CSS yang akan kamu gunakan. (css untuk layout profile friendster).
[3] Simpan kode css yang sudah kamu dapatkan tersebut dengan ekstensi .css contoh "layout_keren.css".
[4] Upload terlebih dulu file .css tersebut ke file hosting yang support direct link (baca posting sebelumnya) dan dapatkan alamat link letak file tersebut disimpan (contoh, http://dompetfoto.org/files/23/layout_keren.css).
[5] Letakkan link ke file css yang sudah kamu upload sebelumnya tadi pada kode js di atas, cari dan ganti tulisan 'Link CSS Di sini' dengan link css yang sudah kamu dapatklan tadi.
[6] Kemudian save as kode Javascript tadi dengan ekstensi '.js' (contoh: koderahasia.js).
[7] Kemudian upload file .js tersebut ke server hosting file sharing (bisa di Ripway.com, Dompetfoto.org, Hotlinkfiles.com, dll - baca posting tentang free file hosting yg support direct link).
[8] Dapatkan link url tempat file tersebut disimpan di server hosting (contoh: http://dompetfoto.org/files/23/koderahasia.js).
[9] Kemudian ganti tulisan 'url_tanpa_js' pada kode di bawah ini. Ingat hilangkan bagian (.js) (titik+js) pada url tersebut dan masukkan pada kode di bawah ini.

Code :
<%BCscript type="text/javascript" src="url_tanpa_js.%BCjs"><%BC/script>

Nah yang perlu kamu lakukan untuk terakhir kalinya tinggal kamu copy-paste-kan kode di atas (yg sudah kamu tambahi link js) ke dalam kolom About Me, Describe Who I want to meet, atau dalam Media Box kemudian tekan tombol save. Read more | Baca lagi