CARA MEMBUAT DAN MENGHIAS LAYOUT FRIENDSTER

Cara menghias layout friendster

Berikut ini adalah cara mudah membuat dan menghias layout friendster sesuai keinginan anda !

1. tentukan tema layout friendster yang akan anda buat, misalnya anda akan membuat layout friendster klub sepakbola Inter Milan, ( atau bahkan photo anda sendiri ), hmm, okey kita pick Inter Milan saja…kenapa bukan AC milan, itu bisa kita diskusikan lain waktu…he he , yang jelas kita sudah menentukan tema yang kita sepakati…klub sepakbola inter milan..
2. selanjunya yang anda perlukan adalah memilih photo atau picture yang akan anda jadikan background, anggap saja photo ini deh…

1. nah, hal berikutnya yang perlu anda pikirkan adalah theme warna…kita tahu warna dasar inter milan adalah biru dan hitam ..(yupz..mungkin anda tidak tahu, tapi untuk mempersingkat waktu saya anggap saja sudah tahu..he he ), btw, jadi theme warna kita adalah biru hitam…
2. okey, sekarang kita melangkah ke tahap yang menentukan ! dimana anda akan melakukan modifikasi yang sebenarnya…semua ini terletak pada kunci utama bahasa layout yaitu css dan HTML…untuk kali ini kita gunakan bahasa HTML …
3. sebelumnya untuk sekedar info, HTML adalah bahasa yang digunakan untuk menyusun banyak layout atau template di dunia perinternetan…HTML artinya Hypertext Markup Language…soal apa itu HTML tidak uasah kita bahas banyak disini toh, yang penting anda mengerti bagaimana cara menggunakannya…he he, nah selanjutnya dengan menguasai kunci-kunci HTML layout friendster, anda akan dengan mudah membuat layout sesuai dengan ide apapun yang muncul dikepala anda baik yang secara mendadak maupun yang tidak.…! walaupun ada cara yang jauh lebih mudah nantinya, he he nanti saya ajarkan cara RAHASIA membuat layout friendster dalam hitungan detik…!
4. okey, sekarang kita masuki area HTML, masih ingat theme warna yang kita sepakati diatas ?, yupz, anda dan saya sepakat akan membuat layout bertheme warna biru dan hitam,tugas anda sekarang (bukan tugas saya…)adalah mengganti warna maupun corak atau transparansi (dan juga ukuran border jika perlu) dari layout fs yang akan anda buat…, kedengaran rumit? Ah tidak juga, sebenarnya hal ini sangat sederhana sekali, ….sekarang lihat lah dibawah ini (hampir) semua kunci2 utama HTML layout friendster sudah berhasil saya terjemahkan, dan hasilnya sebagai berikut…

sebelumnya silahkan buka microsoft word anda dan lalu copy code dibawah ini dan paste di microsoft word yang baru anda buka tsb..

ida bagus gede sasra bhanutama

/* http://www.tutorial-friendster.blogspot.com */

/* PAGE BACKGROUND */

body {

background-image: url(http://i298.photobucket.com/albums/mm277/bhanutama/internazionalecracked.jpg);

background-attachment: fixed;

background-position: center center;

background-repeat: no-repeat;

background-color: #000000;

cursor: ;

}

/* GLOBAL FONTS */

.usercontent {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

}

/* GLOBAL LINKS */

.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active {

color: #ff0033;

}

.usercontent a:hover {

color: #cc0033;

}

/* MASTER BOXES */

.commonbox {

background-color: #ffffff;

background-image: url(http://i200.photobucket.com/albums/aa73/fs-layouts/fslybg/2008/06/hk-big/hk-big.gif);

}

.commonbox .evenrow {

background-color: transparent;

}

/* MASTER HEADERS */

.commonbox h1 {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #ff0000;

background-color: #ffffff;

}

.commonbox h2 {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #ff0000;

background-color: #ffffff;

}

/* CONTROL PANEL: BOX */

.controlpanel {

border-width: 1px;

border-style: solid;

background-color: transparent;

}

/* CONTROL PANEL: USER PHOTO */

.controlpanel .imgblock200 {

border-color: #ff0000;

}

/* CONTROL PANEL: DATA */

.controlpanel .q {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #000000;

}

.controlpanel .data {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #ff0000;

}

.data a {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #ff0000;

text-decoration: ;

}

/* CONTROL PANEL: MORE ABOUT ME LINK */

a.more {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #ff0000;

text-decoration: ;

}

/* CONTROL PANEL: BUTTONS */

background-image: url(http://i200.photobucket.com/albums/aa73/fs-layouts/fslybg/2008/06/hk-big/hk-big.gif);

#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {

font-family: Arial, Sans-serif;

color: #ff0000;

border-color: #000000;

background-color: #ffffff;

text-decoration: ;

}

#controlPanelButtons a:hover {

font-family: Arial, Sans-serif;

color: #000000;

border-color: #ff0000;

background-color: #ffffff;

text-decoration: ;

}

/* MISC: TESTIMONIALS/REVIEWS TEXT */

.data {

font-family: Arial, Sans-serif;

color: #;

text-transform: ;

}

/* MISC: VIEW ALL LINKS */

.commonbox .viewall {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #ff0000;

}

/* MISC: SMALL PHOTO NAMES */

.commonbox .dr {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #ff0000;

background-color: #ffffff;

}

nah anda sudah melihat, diatas ini code-code friendster yang sebenarnya anda bisa edit dan ubah se “kepribadian” anda, caranya sederhana..

selanjutnya mendaftarlah di photobucket.com…caranya sederhana…masuk ke photobucket.com jadilah member ( join now ) dan miliki account pribadi…

setelah menjadi member di photobucket.com, maka upload pic anda , caranya klik my album-album&upload…lalu upload picture anda…lalu cari “direct link” picture anda…biasanya dalam format sebagai berikut http://i298.photobucket.com/albums/mm277/bhanutama/internazionalecracked.jpg

7. setelah itu kita masuk ke bagian yang mengasikan…yaitu mengubah layout anda sendiri…pertama copy code2 css diatas…kemudia paste di media anda (misalnya microsoft word),

8. terjemahan kode-kode itu adalah sebagai berikut (huruf hitam mewakili kode css, sedangkan warna hijau mewakili keterangannya) :

/* PAGE BACKGROUND */

Artinya segala sesuatu mengenai background anda

body {

background-image: url(http://i298.photobucket.com/albums/mm277/bhanutama/internazionalecracked.jpg);

“http://i298.photobucket.com/albums/mm277/bhanutama/internazionalecracked.jpg” diganti menjadi http:// direct link picture yang anda pilih yang anda tempatkan di photobucket.com (misalnya http://..........)

background-attachment: fixed;

background-position: center center;

background-repeat: no-repeat; no-repeat bisa diganti dengan repeat

background-color: #000000;#000000 adalah warna background anda, yang artinya hitam, warna ini bisa dirubah dengan patokan warna-warna di bawah halaman ini

cursor: url("http://www.123cursors.com/freecursors/7773.ani"),default;
}

/* GLOBAL FONTS */

Global fonts mewakili tulisan yang berada di kotak ini ….

.usercontent {color: #ffffff; }tanda # merupakan code warna, #ffffff; merupakan kode warna yang artinya putih, artinya tulisan global fonts pada layout tsb berwarna putih, anda bisa merubah warna tersebut dengan warna apapun yang anda suka ( lihat dibawah..deretan kode-kode warna, saya sudah menambahkan lebih lengkap dari warna yang ada di “….com”…),

/* GLOBAL LINKS */

Global links mewakili tulisan yang berada di kotak ini ….

.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active {

color: #ffffff;

} tanda #ffffff; merupakan kode warna yang artinya putih, anda bisa merubah warna tersebut dengan warna apapun yang anda suka

.usercontent a:hover {

color: #b3b3b3; warna bisa dirubah, nb: hover artinya warna yang menebeng di warna utama anda..( semacam blink-blink ketika cursor anda menyentuh global links, anda bisa tentukan warna anda

text-decoration: line-through;

}

/* MASTER BOXES */

Master boxes mewakili kotak ini….

.commonbox {

border-width: 6px; ketebalan pinggiran kotak, bisa dirubah

border-color: #ffffff;warna border , bisa dirubah

border-style: solid;

background-color: transparent; warna background , bisa dirubah

}

.commonbox .evenrow {

background-color: transparent; }

warna background evenrow, bisa dirubah, box evenrow mewakili kotak yang ada dibawah kotak masterboxes ini…

/* MASTER HEADERS */

Master header mewakili kotak-kotak ini,

.commonbox h1, {

color: #000000; warna, bisa dirubah

text-transform: uppercase;

background-color: #ffffff; warna, bisa dirubah

}

.commonbox h2 {

color: #000000; warna, bisa dirubah

text-transform: uppercase;

background-color: #ffffff; warna, bisa dirubah

}

/* CONTROL PANEL: BOX */

Control panel box mewakili kotak ini

.controlpanel {

border-width: 6px; ukuran, bisa dirubah

border-color: #ffffff; warna, bisa dirubah

border-style: solid;

background-color: transparent; warna, bisa dirubah

}

/* CONTROL PANEL: USER PHOTO */

Control panel user photo mewakili kotak ini

.controlpanel .imgblock200 {

border-color: #ffffff; warna, bisa dirubah

}

/* CONTROL PANEL: DATA */

Control panel data mewakili tulisan2 berikut :

.controlpanel .q {

color: #ffffff; warna, bisa dirubah

}

.controlpanel .data {

color: #b3b3b3; warna, bisa dirubah

}

.data a {

color: #b3b3b3; warna, bisa dirubah

text-decoration: ;

}

/* CONTROL PANEL: MORE ABOUT ME LINK */

Bagian ini mewakili tulisan more about me..

a.more {

color: #ffffff; warna, bisa dirubah

text-decoration: ;

}

/* CONTROL PANEL: BUTTONS */

Bagian ini mewakili

#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited {

font-family: Arial, Sans-serif;

color: #ffffff; warna, bisa dirubah

border-color: #ffffff; warna, bisa dirubah

background-color: transparent; warna, bisa dirubah

text-decoration: ;

}

#controlPanelButtons a:hover

Control panel button hover adalah “ bayangan blink-blink dari control panel button anda, anda bisa mengatur bagian ini…

{

font-family: Arial, Sans-serif;

color: #ffffff;

border-color: transparent; warna, bisa dirubah

background-color: #000000; warna, bisa dirubah

text-decoration: line-through;

/* MISC: TESTIMONIALS/REVIEWS TEXT */

Misc.testimonials mewakili jenis tulisan pada testimonial review…

.data {

font-family: Arial, Sans-serif;

color: #ffffff; ; warna, bisa dirubah

text-transform: ;

/* MISC: VIEW ALL LINKS */

Misc. view all links mewakili bagian ini pada view all links

.commonbox .viewall {

color: #ffffff; ; warna, bisa dirubah

/* MISC: SMALL PHOTOS */

Misc. small photos mewakili bagian photo kecil

.commonbox .imgblock75, .ir {

border-width: 6px; ukuran, bisa dirubah

border-color: #ffffff; warna, bisa dirubah

border-style: solid;

background-color: transparent; warna, bisa dirubah

}

/* MISC: SMALL PHOTO NAMES */

Misc.small photo names mewakili bbagian tulisan nama photo kecil

.commonbox .dr {

color: #ffffff;

background-color: transparent;

}

dibawah ini saya lamprkan code-code bahasa warna...)

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

nah ...sekarang anda bebas berkreasi bukan....

NAH, saya sudah janji memberitahukan anda cara membuat / mengganti theme layout friendster dengan cepat bukan...?caranya gampang...cari saja code layout (seperti yang diatas), anda bisa dapatkan di banyak tempat.., lalu pilih yang sesuai thema anda, misalnya themanya pink, jadi anda cari saja layout yang berwarna pink, lalu upload foto anda ke photobucket.com, nah setelah itu tinggal ganti deh pghoto backgroundnya (sesuai tutorial diatas ), dan jreng..jreng..jreng..jadi deh...presto ! layout friendster yang baru...he he selamat mencoba...!