Desain Layout Friendster

Sebelum memulai trik ini, baiknya berfikirlah tentang sebuah permainan, jangan tegang, karna ini bukan sesuatu yang sulit. baca perlahan langkah-langkahnya, jangan takut berfantasi di dalamnya yakinlah dengan berfantasi kompi kamu tidak akan mengeluarkan asap atau meleduk..hehehehehe…..

Ini hanya sebuah permainan, inget ini juga bukan sekedar mainan, pelajari setiap kode-kodenya dengan fantasimu, jika begini jadi apa..? jika begitu jadi apa..? dan dengan sendirinya kamu akan mengerti apa itu HTML, CSS dll. Sekali lagi jangan takut salah, karna tidak akan ada yang menghukummu.. kecuali biyaya warnet membengkak karna asiknya lupa waktu wakakakaka…

Ingat, ini cara termudah, karna semua kode telah disediakan, kita hanya meneruskan mengisi sesuai dengan fantasi kita..

Untuk memulai dan memperaktekannya silahkan buka terlebih dahulu CUBANCOUNCIL lalu ikuti tetorial di bawah ini tahap demi tahap.

PAGE BACKGROUND
Dalam hal ini ada lima langkah yang harus kamu selesaikan..

Langkah awal Background Color:
Isi warna yang kamu suka untuk background kamu. kamu bisa memilih bermacam warna tersebut dengan mengklik CHOOSE COLOR di sebelah kanan kotak yang akan di isi.

Langkah kedua Image URL:
Cari gambar yang kamu suka, bisa foto kamu, gambar-gambar animasi jepang, pemandangan alam yang menurut kamu bagus atau sebuah gambar yang menunjukan karakter serta sifat kamu untuk sebuah background pada profile friendster (PFS) kamu.

Untuk mendapatkan sebuah gambar background kamu bisa mencarinya di yahoo atau juga google tapi sebelumnya kamu klik images atau gambar diatas menu search, lalu masukan nama gambar yang kamu cari di kotak searchnya, misal Donald Duck. setelah di enter maka akan banyak sekali gambar yang namanya berbau Donald Duck.

Pilih yang kamu suka dengan mengklik gambar “usahakan ukuran gambar 1024 x 768 agar dapat tertampil penuh di monitor kamu” lalu klik view image. Setelah gambar tertampil seutuhnya lihat alamat situs gambar tersebut, jika diakhirannya berformat jpg, jpeg, gif copy link tersebut lalu paste pada kotak IMAGE URL pada CUBANCOUNCIL yang kamu jadikan tempat kamu memperaktekkannya.

Langkah Ketiga Image Repeat:
Repeat atau berulang..dalam menu ini kamu bisa isi dengan mengklik kotak repeatnya isi dengan NO REPEAT jika ukuran gambar yang kamu jadikan background sesuai dengan ukuran yang di sebutkan di atas, jika ukurannya kecil kamu bisa memilih REPEAT atau bisa juga NO REPEAT sesuai selera kamu..

Langkah Keempat Image Position:
Dalam menu ini tidak jauh beda caranya dengan menu repeat, cuma disini adalah printah letak untuk gambar yang kamu jadikan background di posisi mana..

Langkah Kelima Image Scroll
Jika kamu suka dengan background kamu tetap tidak bergerak pada saat scroll kamu naikan turun, kamu bisa memilih FIXED. atau kamu mau Background kamu terikut saat kamu naikan dan turunkan scroll, pilihlah SCROLLABLE.

Selesai juga yach..:D sampai disini perasaan kamu bagai mana..? tegang..wakakakakaka sebegitunya, enggak la yah, kali dah setegang itu…

5 Langkah diatas tadi baru tahap untuk sebuah Background, masih ada yang lainnya di bawah menanti yaitu untuk urusan warna teks dan box-box teks tersebut.. Ayo kita main lagi..

GLOBAL TEXT
Kalo ini sih cuma tiga langkah saja, tapi punya peranan dan pengaruh penting pada teks PFS kamu.. siap untuk mulai..?

Langkah Pertama Text Font Family
Nah disinilah tempat kamu bermain dengan teks, aku biasa menggunakan tipe teks CENTURY GOTHIC. Kalau kamu terserah mau jenis teks apa yang menurut kamu bagus untuk tulisan di PFS kamu tinggal pilih sudah tersedia kok. Atau kalau kamu mau teks yang beda seperti MONOTYPE CORSIVA bisa kamu masukan tapi setelah ini semua selesai, bisa juga teks lainnya asal tipe teks tersebut tersedia pada komputer dan dapat dibaca oleh programnya..

Langkah Kedua Text Color
Menu ini untuk warna teks pada judul PFS kamu, misal pada tulisan ABOUT ME, WHO I WANT TO MEET, SCHOOLS, OCCUPATION, HOBBIES AND INTEREST dan semacamnya.. Silahkan pilih warna yang kamu suka untuk tempat tersebut.

Langkah Ketiga Text Transform
Menu ini untuk bentuk teks kamu ada CAPITALIZE atau hurup besar, UPPERCASE atau disebut juga teks diatas dan LOWERCASE teks di bawah juga ada NONE tidak sama sekali.

Mudahkan..? iya mudah, aku nulisnya teler..tapi tidak apa, yang penting bisa membantu kamu Puas puas puas.. tak sobek sobek mulut mu..wakakakaka kaya tukul aja yah..
Ok masukin tahap selanjutnya..

GLOBAL LINKS
LINKS atau menghubungkan. Nah cuma ada dua langkah, makin ringankan..?

Langkah Pertama Link Text Color
Jelas tertulis diatas yang berarti menghubungkan warna teks, kira-kira gitu deh.. terserah kamu menggunakan warna apa untuk teks yang terhubung tersebut.. kalu tadi pada menu TEXT COLOR untuk judulnya, LINK TEXT COLOR untuk isinya. Paham gak..? Gak yah..? cuape deh.. kamu kasih aja warna yang berbeda pada setiap warna, setelah selesai, kamu akan tau sendiri warna-warna yang kamu masukan tadi jadinya terletak di mana.. Ok..

Langkah Kedua Link Text Decoration
Nah ini cuma tambahan, tapi berpengaruh juga atas keindahan PFS kamu.. Menu ini untuk tambahan asesoris pada teks kamu seperti UNDERLINE pasti kamu taukan..? ya garis bawah, jika kamu pilih ini maka teks pada PFS kamu akan tergaris bawahi. Silahkan pilih yang kamu suka, ada garis di atas atau NONE tidak sama sekali.

GLOBAL LINKS-HOVER
Lumayan ada dua langkah doang lagi..

Langkah Pertama Link-Hover Color
Adalah efek atau warna berbeda juga model lain di balik teks PFS kamu yang hanya bisa dilihat bila mousenya kamu dekatkan. Makanya bedakan warna-warnanya, agar kamu lebih mudah untuk mengetahui warna tadi jadi apa dan terletak di mana.

Langkah Kedua Link Hover Decoration
Menu ini sama pungsi dan cara kerjanya dengan LINK TEXS DECORATION di atas.

Nah, sampai disini aku harap sudah pada paham, karna yang dibawah ini cara kerjanya tidak jauh berbeda, tapi tetep masih berpengaruh pada tampilan PFS kamu..

Lanjut gak ni..? atau kamu sudah bisa berfantasi sendiri..?
Aku yakin kamu sudah bisa yah.. Ok agar tidak menyesatkan aku jelaskan saja menu-menu berikut di bawah yah, karna cara kerjanya pasti kamu sudah paham karna sama dengan yang di atas.

MASTER BOXES
Dalam menu ini baiknya kamu tandai kotak yang bertuliskan MAKE ALL BOXES TRANSPARENT secara otomatis menu-menu yang tersedia dibawahnya akan transparent dan Background kamu dapat terlihat tidak di tutup oleh box.

CONTROL PANEL
Menu ini tidak jauh beda dengan menu TEXS COLOR atau LINK-HOVER COLOR, pilih teksnya, lalu warnai.
Catatan: jika ingin terlihat jelas Background kamu, gunakanlah transparent pada menu BACKGROUND COLOR juga BORDER COLOR pada CONTROL PANEL BOX jika menggunakan transparent, kamu tidak perlu lagi mengisi BORDER SIZE juga BORDER STYLE.

Tahap berikutnya yaitu USER PHOTO, DATA/STATS LABELS, DATA/STATS TEXT, DATA/STATS LINKS, MORE ABOUT ME’-LINK, CONTROL PANEL BUTTONS, CONTROL PANEL BUTTONS (ON HOVER), perlakukanlah sama seperti pada menu GLOBAL TEXT dan pada menu FONT FAMILY, COLOR, TRANSFORM, LINK FONT FAMILY, LINK COLOR, LINK TRANSFORM, LINK DECORATION juga HOVER FONT FAMILY, HOVER COLOR, HOVER DECORATION. Nah untuk yang berbau BACKGROUND COLOR juga BORDER COLOR cukup diberikan transparent aja dulu dan selanjutnya terserah kamu untuk mencari taunya.

INDIVIDUAL BOXES
baiknya biarkan saja jangan di ganggu gugat

MISC
Bagian ini untuk tampilan testimonial di PFS kamu, pilih USE CUSTOM VALUES, setelah terbuka, perlakukan sama seperti GLOBAL TEXT pada FONT FAMILY, COLOR, TRANSFORM, LINK FONT FAMILY, LINK COLOR, LINK TRANSFORM. Sedangkan BACKGROUND COLOR juga BORDER COLOR cukup diberikan transparent.

CUSTOM CURSOR
Pilih USE CUSTOM VALUES dan pilih CURSOR yang kamu suka..

Setelah semua selesai, berikut yang harus kamu lakukan, lihat kebawah ada kotak kosong:
Klik tombol Generate Code untuk melihat kode CSS sesuai pengaturan yang telah kamu buat
Klik tombol Preview Code untuk melihat contoh tampilan PFS yang sudah kamu buat tadi.
Setelah melihat priview, kamu bisa coba-coba lagi menggantinya dan Generate lalu priview sampe kamu puas dgn hasilnya.
Setelah kamu srek dengan hasil karyamu, pilih semua kode yang terdapat di dalam kotak kode CSS dengan memblognya dari atas sampe bawah dan jangan ada yang tertinggal lalu klik kanan pada kode yang sudah terblog dan copy.
Buka PFS kamu, klik EDIT PROFILE, lalu klik CUSTOMIZE kemudian liat kebawah ada dua kotak PASTE kode yang kamu COPY tadi di kotak bagian atas lalu turun kebawah lagi liat tombol SAVE klik.
Setelah terSAVE klik tulisan VIEW PROFILE.. jika belum berubah, REFRESH beberapa kali dan lihat hasilnya..

Huuuuu…… akhirnya selesai juga yah..

Sekedar info nih bagi yang pengen punya Handphone canggih tapi gratis, klik gambar dibawah ini:

Sebelumnya gw minta maaf buat semua temen yang suka belajar karena belum sempat memberikan jawaban-jawaban temen-temen semua.

Gw punya cara baru untuk desain Friendster dengan tampilan seperti generate dan injections yang biasa kita lihat di banyak friendster-friendster orang-orang Thailand.

Cara ini lebih simple dan menghemat waktu. Gw cuma berpesan, yakinlah, segala yang instan tidaklah mendidik. Semakin kita deberikan kemudahan, semakin besar peluang untuk menjadi seseorang yang ketergantungan, dan karna itu semua kita tidak mengetahui awal dan akhirnya, dan jika itu terjadi, maka bodohlah kita.

Tutorialnya ada di sini

& Komentar

Komentar RSS Lacak Balik URI Pengenal