Membuat Layout Friendster

Kemaren, ada kawan saya yang bertanya bagaimana cara ganti layout friendster dengan bikinan sendiri, hmm oke kali ini akan saya jawab dengan mempostingnya di blog saya. Oh iya bagi para master/suhu di bidang desain2 web, mungkin tulisan saya akan diketawain, jadi saya mohon petunjuknya aja, biar postingannya tambah mujarab, dan pastinya semakin memudahkan kawan-kawan dalam berkreasi di friendster.

Wel, sekarang silakan log in ke friendsternya, trus masuk ke customize page, untuk masuk ke halaman tersebut kawan-kawan bisa langsung lewat halaman depan (dashboard) atau melalui menu edit profile. Kemudian, cari box Advance Customiztion, Customize CSS

Kalo kawan-kawan mempunyai basic yang cukup mantheeb dalam hal bahasa HTML, bisa langsung edit kode-kode tersebut menggunakan notepad atau menggunakan software pihak ke tiga seperti dreamweaver. Tapi sebelumnya perlu kawan-kawan ketahui bahwa layout untuk friendster ini tidak bisa di edit seluruhnya, misalnya box-box yang sudah tidak bisa di ubah-ubah lagi, di sini kawan-kawan hanya bisa mengedit style nya saja dengan menggunakan kode css. Kenapa? saya tidak tahu alasan dari om FS, yang jelas kreativitas kita terbatas hanya pada mengubah warna tampilannya doank, soalnya kode yang tersedia cuma itu,hehehe

Hmmm, tapi bagaimana kalo kawan-kawan masih kurang familiar dengan kode-kode di atas? untuk ini om FS udah ngasih solusi yang mujarab. Kamu tinggal pilih customize with css editor yang ada di atas box.

Setelah kamu klik nanti akan muncul halaman friendster profile editor. Di sini kamu bisa mengedit css profile kamu tanpa harus susah payah berurusan dengan kode css secara manual. Gimana udah lumayan tertarik? Kalo tertarik akan saya lanjutkan.

Di css editor tersebut ada beberapa optional yang harus kamu pilih sebelum menggenerate kodenya dan dicopy pastekan ke css box di FS kamu. Hmmm bingung ya? oke akan saya bahas satu persatu...

Pada gambar di atas ada dua optional untuk mengedit layout, yaitu page background dan global text. Pada opsi page background ini, kawan bisa memasukkan gambar hasil kreasi sendiri sebagai background profile. Bisa aja sih sebenarnya foto-foto kawan (yang merasa ganteng atau cantik) di pasang di sana, tapi saran saya sih sebaiknya perhatikan size file-nya, kalo ukuran filenya besar, sebaiknya dioptimasi dulu biar jadi kecil. Kenapa ini sangat diperhatikan. sebab sangat berpengaruh pada kecepatan membuka profile, kalo sizenya udah besar, trus kompi yang digunakan buat mengakses juga lelet, waa saya jamin, sebagus apapun backgroundnya, orang-orang pasti gak betah (gak betah nunggu maksudnya)hehehe.

Kalau sudah yakin mana gambar yang hendak dijadikan layout, saatnya kawan mengupload gambar tersebut. Bisa aja kawan pake hosting gratisan buat naroh gambarnya (misalnya kaya saya make hostingnya google page creator), atau kalau tidak mau susah, bisa aja kawan langsung upload pake hosting yang sudah direkomendasikan oleh FS (seperti imageshack) dan kawan tidak perlu pusing-pusing mikirin alamat situsnya, bisa aja langsung lewat opsi page background tersebut. Coba deh kawan amati, tulisan di bawah kotak untuk memasukkan alamat image, ada tulisan "Not sure about how you insert a background image? Click here for a handy step-by-step tutorial"

Yup betul sekali, tinggal clik here, selesai deh, nanti akan muncul halaman baru di tab sebelahnya dan cari tombol browse pilih image di kompi kawan, dan upload. Selesai? belum, nanti kalo sudah terupload, akan ada pilihan alamat-alamat image tadi, kawan pilih aja yang ada tulisannya "Direct link to image", copy alamat yang ada di box sebelah, kemudian pastekan ke page background bagian url image di css editor seperti gambar di atas. Yup selesai untuk uplod image. Selanjutnya di page background ini ada beberapa pilihan lagi.

Background colour : ini digunakan apabila kawan-kawan hendak mengubah warna latar belakang dari layout. Tapi ini berguna apabila opsi pada "image repeat" di pilih selain repeat. Hmm bingung ya?

Opsi repeat image : ini digunakan untuk pengulangan gambar. Hmm maksudnya? Saya ambil contoh profile punya saya, silakan klik di sini untuk melihatnya. Naa image background saya aslinya cuma segini, tapi kok di FS imagenya bisa nutupi 1 halaman, yup...itulah jawaban dari penggunaan repeat image ini, kalo saya pilih repeat, berarti pengulangan terjadi pada sumbu x dan sumbu y, hehehe ngerti kan, kalo gak ngerti saya ganti kata-katanya jadi, pengulangan gambar secara horizontal dan vertikal. hehehe kalo saya pilih opsi repeat x berarti pengulangan hanya terjadi pada sumbu x atau secara horizontal saja.

Image position : ini pengaturan ttg peletakan gambar atau image, pilihannya ada banyak, kawan bisa coba2 sendiri.

Image scroll : Kalo ini, pengaturan pergerakan background kita, maksudnya, kalau kalian pilih opsi fixed, maka gambarnya diem aja disitu, walaupun kalian lagi muter-muter scroll bar untuk melihat halaman dibawahnya. Contoh, untuk punya saya, saya milih opsi fixed. Jadi kalau kawan-kawan mau lihat coment yang ada dibagian paling bawah, otomatis kawan-kawan menggerakkan scroll untuk melihatnya, lihat image backgroundnya diem gak bergerak. yang bergerak cuma box-box yang memuat tentang tulisan-tulisan dan coment aja. Ngerti kan? untuk opsi yang satunya adalh kebalikan dari opsi fixed. mau lihat hasilnya silakan aja coba sendiri, hehehe

Untuk box pilihan pada gambar di atas yaitu global text. Opsi ini untuk menentukan text-text yang ada di FS secara keseluruhan, misalnya nih untuk tulisan view messages atau tulisan untuk isi dari data-data kamu semisal schol, favorite books, dll. Trus untuk text transform, itu untuk mengubah bentuk tulisan, ada pilihan hurub besar semua ada juga tulisan yang kecil, begitu lah, ingin tahu lebih banyak silakan saja di coba sendiri.

Kita lanjutkan, untuk gambar di atas, ada 3 pilihan global link, global link hover, dan master boxes dan headers.
Global link : ini untuk pengaturan warna dan aksesorisnya pada tulisan yang bertautan. Langsung contoh, view messages, atau tulisan edit, naa itu kan bertautan. Coba kalian klik pasti akan muncul tautannya. Hmm intinya seperti itu lah. hehehe untuk pilihan link type decoration, bisa kalian pilih none untuk tidak ada perubahan. tapi kalo pengen bergaris bawah bisa aja pilih yang underline, hehehe Gampang kan? gampang dunk...hehehe

Link Hover : itu pengaturan saat kita menaruh kursor di atas tulisan yang ada tautannya, Maksudnya coba kalian lihat punya saya, kalo kalian naroh kursor kalian di atas tulisan edit, atau more about sulae, pasti warnanya berubah...ya kan, naa itu yang di maksud dengan link hover. untuk pewarnaannya suka-suka aja kawan..hehehe

Master boxes dan header : dalam FS kita kan banyak tuh kotak-kotak, yang isinya tentang kita atau komen untuk kita, kalo pengen pengaturan manual kalian bisa hilangkan chex point pada opsi :make all boxes transparent" Tapi kalo pengen semua boxnya transparant (maksudnya bisa ngeliat background kalian bisa aja langsung di chek opsinya. Untuk contoh bisa kalian lihat profile saya. Naaa saya pengaturan manual, dan kebanyakan saya memilih warna yang hitam (alias tidak transparant). Jadi backgroundnya ketutupkan. Hmmm gimana kawan ngerti kan?

Oke-oke biar cepat ngerti, untuk selanjutnya biar kawan-kawan survive sendiri aja, gimana? kan udah ada bayangan dengan penjelasan di atas.

Kalo udah pengaturannya kawan-kawan bisa generate kode css nya untuk di copy paste ke FS kalian. Hehehehe

Masih bingung? kawan-kawan bisa aja kasih komen atau nanya lewat blog ini, sebisa mungkin akan saya bantu oke.

Tidak ada komentar: