[Tutorial] Membuat Layout Friendster Sendiri

[redbloodx]

/* Redbloodx friendster profile editor */
/* PAGE BACKGROUND */
body {
background-image: url(.gif .jpg/.jpeg .png);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-color: black;

}
/* GLOBAL FONTS */
.usercontent {
color: red;
text-transform: capitalize;
}
/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active {
color: red;
}
.usercontent a:hover {
color: red;
}
/* MASTER BOXES */
.commonbox {
background-color: transparent;
}
.commonbox .evenrow {
background-color: transparent;
}
/* MASTER HEADERS */
.commonbox h1, .commonbox h2 {
color: red;
text-transform: capitalize;
background-color: transparent;
}
/* CONTROL PANEL: BOX */
.controlpanel {
background-color: transparent;
}
/* CONTROL PANEL: USER PHOTO */
.controlpanel .imgblock200 {
border-color: transparent;
border-style: none;
}

/* CONTROL PANEL: DATA */
.controlpanel .q {
color: red;
text-transform: capitalize;
}
.controlpanel .data {
color: red;
}
.data a {
color: red;
text-decoration: underline;
}
/* CONTROL PANEL: MORE ABOUT ME LINK */
a.more {
color: red;
text-decoration: underline;
}
/* CONTROL PANEL: BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
color: red;
border-color: transparent;
border-style: outset;
background-color: transparent;
text-decoration: underline;
}
#controlPanelButtons a:hover {
color: red;
border-color: red;
background-color: transparent;
}
/* MISC: TESTIMONIALS/REVIEWS TEXT */
.data {
color: red;
text-transform: capitalize;
}
/* MISC: VIEW ALL LINKS */
.commonbox .viewall {
color: red;
text-transform: capitalize;
}
/* MISC: SMALL PHOTOS */
.commonbox .imgblock75, .ir {
background-color: transparent;
}


/* MISC: SMALL PHOTO NAMES */
.commonbox .dr {
color: red;
text-transform: capitalize;
background-color: transparent;
}

Diatas adalah coding layout cuba sendiri CSS (CASCADING STYLE SHEETS) untuk penguna Friendster. Sedikit pemahaman buat semua beginner. CSS adalah salah satu contoh bahasa program untuk pembangunan laman web. CSS adalah gabungan asas C++ dan juga HTML. Namun CSS lebih mudah berbanding produk asasnya. Kepada orang2 yang masih belum mengenali HTML dan C++ ini mungkin agak susah untuk memhaminya.

Namun saya telah sediakan program diatas ini untuk semua orang yang mencubanya. Pastikan semua pengguna telah memiliki akaun profile untuk friendster.


Step 1

Buka Notepad. Dekat mana Anda nak buka notepad? Ok. Saya tunjukan yer.

Klik di Start Menu.
Lepas tu klik RUN….
Kemudian kotak RUN akan keluar. Ada ruangan untuk menaip disitu.
Taipkan NOTEPAD.
Klik OK.
Program NOTEPAD akan keluar. Ia seperti MS WORD tapi toolnya kurang dari MS WORD. Tapi jangan pandang remeh kerana asas pembinaan laman web bermula dari NOTEPAD.

Tapi kepada yang memang jenis pemalas tu boleh guna cara WordPad. Uiks? Nak kena ajar ke mcmna nak buka WordPad? Macam ni ha…

Klik Start Menu.
Pergi All Programs.
Pastu Pergi kat Accessories.
Klik WordPad.

WordPad lebih skit dari Notepad


Step 2

Highlight dan Copy semua program yang saya buat tu.. semua sekali jangan tinggal walau hanya titik pn. Sebab setiap satu aksara mempunyai fungsinya tersendiri.

Kemudian Paste kedalam notepad atau wordpad tadi.

Step 3

Program yang saya warnakan boleh diubah. Cuma saya syorkan ubah yang berwarna BIRU dan MERAH sahaja. Kerana anda kena paham dahulu bahasa2 arahannya.

Warna Biru: ( Background/Latar Belakang) dari URL
background-image: url(.gif .jpg/jpeg .png);


Anda ble masukan imej dari mana2 website yg anda suka. Tp ia mestilah hanya dalam bentuk format .gif (Graphics Interchange Format) .jpg/.jpeg ( Joint Photographic Experts Group atau .png (Portable Network Graphics).

Contoh

background-image: url( http://farm4.static.flickr.com/3106/3140702732_136880c02d_o. jpg);

dimana nak dapatkan URL (Uniform Resource Locator) imej?

Bergantung pada browser yg anda gunaka samada Internet Explorer, FireFox, Opera, GoogleChrome atau lain2 browser.

Pada imej web tersebut anda klik kanan pastu klik Properties. Kemudian Copy URL tersebut dan Paste didalam kurungan seperti contoh diatas.

Contoh



Atau anda buatkan akaun flickr.com untuk upload imej atau gambar yang anda ingin gunakan. Mudah sahaja. Nak daftar www.flickr.com ni. Cuma perlu ada akaun email yahoo ja.
Flickr.com akan bagi URL untuk imej dan gambar yang korang semua upload.

Contoh




Saya syorkan anda mengunakan imej JPG/JPEG bersaiz web atau 1024 X 768.


Step 4

Warna Merah adalah warna (font)huruf, warna (Border)bingkai dan warna (background)latar belakang.

Contoh

/* CONTROL PANEL: BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {
color: red;
border-color: transparent;
border-style: outset;
background-color: transparent;
text-decoration: underline;
}


Contoh lain

}
/* GLOBAL FONTS */
.usercontent {
color: darkgreen;
text-transform: capitalize;
}


Atau memasukan code warna CSS dr link bawah ini.

http://www.w3schools.com/css/css_colornames.asp

pilih warna yang anda suka.

Contoh

#controlPanelButtons a:hover {
color: #DA70D6;
border-color: #FFEFD5;
background-color: transparent;
}

Step 5

Warna pink tu aku malas nak ajar. Klu korang cuba2 korang dapat la tau mcmna k.


Step 6

Korang save kan. Letak nama csseditor.txt
Nanti korang nak ubah ape2 korang ble bukak balik csseditor korang.


Step 7

Korang Copy semua kod kat csseditor korang.
Pastu pegi kat Friendster korang tu pegi kat Edit Profile di TAB CUSTOMIZE dalam ruangan COSTUMIZE CSS pastekan didalam tu.

contoh



Pastu korang save. Sekian. Pening pala aku nak tutorial kt korang. Huhu…

Nak tengok PREVIEW? klik link bawah ni.

Http://Profiles.Friendster.Com/76780382


Disediakan oleh: redbloodx
Friendster : Http://Profiles.Friendster.Com/Zonmerah
Blog : http://redbloodx.blogspot.com/ <------ dah xble guna lg.
Tukar ke ----->http://redbloodx.blog.friendster.com/


Pendokong
: http://www.friendster.com
: http://www.friendstertalk.com
: http://www.iluvislam.com
: http://halaqah.net/v10/index.php
: http://dak-ym.tk/
: http://www.ekemahiran.edu.my/