Cara Membuat layout FrIeNdStEr

Cara membuat layout untuk 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.. 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..