Tutorial ini akan membahas dengan singkat bagaimana cara mendesign sendiri layout Friendster kamu. Dengan menggunakan bantuan Friendster layout generator yang akan mempermudah kita untuk melakukan design, layouting, dan langsung mengetahui hasilnya. Apa yang membuat layout generator ini berbeda dengan lainnya? Tentu saja karena disana kita bias melakukan editing layout sedangkan preview hasilnya akan langsung terlihat on the fly. Lalu bagaimana caranya? Tenang cukup mudah koq sebab kamu gak perlu lagi belajar html dan css sampai mumet. Penjelasan akan disertai gambar screencrot ilustrasi. Tapi untuk menghemat bandwith kamu dan biar lebih mudah plus cepat diload browser jadi saya thumbnail aja ya. So kalo pingin memperbesar anunya gambarnya langsung klik aja.
Pertama silahkan buka browser kamu dan kunjungi Friendster layout generator buatan orang Indonesia (bangga nih..meski gk ikut buat). 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. Loh koq ada menu member area? Ntar aja saya jelasin lagi. Nah sekarang klik dulu menu Create New Layout.
Untuk langkah awal dalam mendesign kita akan mulai dari menu Page Background. Nah selanjutnya sebuah jendela kecil akan muncul dari atas layar (asyik nih). Menu Page Background ini 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 background kamu berupa foto atau gambar. Kosongkan jika kamu cuma ingin menggunakan warna dasar saja. Sedangkan “Position” adalah letak posisi foto background di layar. Masih ada 2 opsi lain khan? Tanyakan aja jika gak paham oke. Selanjutnya langsung klik done.
Menu selanjutnya adalah Global Font yakni tempat kamu bisa mengatur jenis font dan pilihan warna font secara umum. Berhubung bagian ini saya anggap cukup dimengerti dan karena saya lupa ambil screencrot screenshootnya, jadi bisa kamu coba sendiri. Nah yuk 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.
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 khan? Di sini sudah cukup jelas koq, dan jangan ragu untuk melakukan eksperiment dan kreatifitas 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.
Nih preview sementara dari hasil mengedit tampilan beberapa module.
Tidak ada komentar:
Posting Komentar