Number of visitors

Followers

Rabu, 25 Maret 2009

Membuat Sendiri Layout Friendster

Membuat Sendiri Layout Friendster



Kali ini kita bahas yuk tutorial cara membuat sendiri layout Friendster. Untuk bisa membuat sendiri layout friendster yang menarik sebenarnya cukup mudah. Kenapa saya bilang mudah ? Karena ada Friendster layout generator yang siap membantu kita mulai dari tahap design, layouting, sampai dengan hasilnya. Yups, dengan menggunakan Friendster layout generator kita bisa melakukan editing layout sedangkan preview hasilnya akan dapat langsung terlihat. Lalu bagaimana caranya? Santai dan tenang saja, untuk bisa membuat layout fs sendiri yang cantik kamu tidak perlu belajar html dan css sampai kejang-kejang :p. Yang perlu kamu lakukan hanyalah :

1. Membuka Friendster layout generator, Disini. Di sana akan terlihat beberapa menu yang berjajar, pada dasarnya menu tersebut adalah urutan cara design layout. Gampangnya untuk mempermudah kamu tinggal ikutin aja urutan menu tersebut dari mulai create new layout sampai Member area.
2. Sekarang klik menu Create New Layout. Sebagai langkah awal dalam mendesign, kita akan mulai dari menu Page Background yang berguna untuk mengubah tampilan umum background profil friendster. Kolom Background color untuk mengubah warna latar halaman. Sedangkan “Background Image URL” dapat diisi dengan url gambar, ini jika kamu ingin memiliki layouts friendster dengan background berupa foto kamu sendiri atau gambar lainnya. Bisa juga kamu kosongkan jika kamu cuma ingin menggunakan warna dasar saja. Sedangkan “Position” adalah letak posisi foto background di layar. Selanjutnya langsung klik done.
3. Menu selanjutnya adalah Global Font yaitu tempat dimana kamu bisa mengatur jenis font dan pilihan warna font secara umum.
4. kita lanjut ke menu “Links”. Dari menu Links ini akan muncul 3 menu lainnya Global Link, Link on Hover dan Viwewall link. Link on hover itu untuk mengatur karakter font ketika ada cursor yang melintas di atas sebuah link.
5. Trus kita lanjutkan dengan menu “Boxes”. Di sini kamu bisa melakukan editing tampilan box (kolom-kolom) karena seperti kita tahu tampilan dasar layout friendster terbagi dalam kolom-kolom terpisah kan. Ga usah ragu untuk melakukan eksperiment dan berkreatifitas sesuka hati, sebab preview akan langsung terlihat. Disampingnya lagi ada menu Modules. Disana terdapat banyak pilihan customizing standard module yang ada di Friendster. Yang umumnya paling banyak dirombak tampilan layoutnya adalah module Friends dan Testimonial Box. Pada testimonial box kita bisa mengatur tampilan kotak/kolom testi.
6. Klik menu Control panel, Control panel adalah bagian utama tempat data diri dan profile kamu ditampilkan. Ditambah lagi letaknya yang above the fold, alias di bagian utama atas yang langsung nongol saat pertama kali profile friendstermu dibuka orang.
7. Bagian terakhir, menu Photo. Disamping kanan control panel kan biasanya langsung nongol juga tuh kolom/kotak foto? Nah ini dia. Mari gunakan imajinasimu untuk menghiasi kotak fotomu. Border color juga banyak opsinya loh. Kamu bisa pilih warna, ukuran ketebalan, dan bentuk border (garis tepi) kotak foto milikmu. Jika keseluruhan proses editing layout telah selesai sekarang saatnya untuk mengambil kode css-nya.

Untuk mengambil kode css yang sudah kamu buat tadi, kamu perlu menjadi member dulu, tapi gratis kok. Klik menu Get Friendster Code lalu sebuah jendela akan keluar menanyakan kamu untuk login. Jika udah pernah daftar sebelumnya langsung klik login aja. Tapi kalo belum ya klik Create an Account.

Oke jika sudah login lalu klik lagi Get Friendster code. Nah menu yang keluar akan beda lagi kalo kamu sudah login. Tuh klik aja Download Friendster Code. Sebuah jendela browser baru akan muncul dengan full kode CSS hasil design friendster layout buatan kamu tadi

Untuk mempermudah proses implementasi di Friendster sebaiknya copy-paste dulu kode tersebut ke Notepad. Kemudian save dengan ekstensi CSS. Jika kode tersebut sudah berupa file berformat .css maka kamu tinggal menguploadnya ke server file hosting kesukaanmu. Langkah terakhir gunakan css linker untuk memasukkanya di Friendster kamu, tentunya setelah kamu login doang ah.

0 komentar:

Posting Komentar

Ada uneg - uneg? ngapain di simpen, silahkan katakan saja! tapi, NO SPAM!!