Ingin membuat layout friendster yang “kamu banget”?
- bacalah tutorial dibawah ini yang sudah saya buat, bacalah dengan seksama…tutorial ini sebenarnya sangat sederhana, jika anda memahami dengan baik..maka anda akan mudah membuat layout-layout friendster sesuka anda….
- untuk memudahkan pengeditan, copypaste code css ini di media anda ( boleh , microsoft word, dreamweaver,atau notepad…)
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 css friendster yang sebenarnya anda bisa edit
- dan ubah sesuai “kepribadian” anda, caranya sederhana..
- pertama tentukan theme (tema) anda terlebih dahulu,(misalnya klub sepakbola intermilan, warna dominan biru hitam), kemudian tentukan picture yang akan menjadi latar belakang anda……
- 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
- 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),
- 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;
}
1 comments:
trimakasih buanyak buanget ya kak atas post nya....
Inem mau tanya ne kak, cara masukin iklan ke blog gimana ya.
ntar kalau kakak ada kesempatan, kirimin inem jawabannya ya kak di inemparinem@yahoo.com...
Thank before.....
Post a Comment