A R I E Z 8 8: Cara Bikin CSS Layout

caranya cukup dengan nentukan kode dan warna saja.

kamu bisa merubah warna, border, huruf, posisi, dkk.

tapi dasar2nya juga ga lepas dari mencontoh donk.

hehe.

ni misalnya :

page background :

/* PAGE BACKGROUND */
body {
background-image: url(http://img297.imageshack.us/img297/4087/bgtw7.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
cursor: url(http://www.myspacecursor.net/love/47.ani);

ntu untuk editan background nya. yang warna merah itu background gambar yang sesuai keinginan kamu ndiri. bisa kamu edit atau kamu ganti link gambar kamu. sedangkan yang warna ijo itu link cursor kamu. klo pengen kursornya tetep ya di kosongkan aja tapi tanda kurungnya jangan dihapus.

scrollbar :

/*SCROLLBAR*/
body {
scrollbar-3dlight-color: white;
scrollbar-face-color: pink;
scrollbar-shadow-color: black;
scrollbar-highlight-color: white;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: black;
scrollbar-track-color: black;
scrollbar-arrow-color: white;
border-style:outset;
border-top-color: pink;
border-bottom-color: pink;
border-left-color: pink;
border-right-color: pink;
border-top-width: 25px;
border-bottom-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
overflow-x: hidden;}

}

ntu untuk scrollbar nya. bisa kamu rubah warna nya sesuai keinginan kamu.

cursor :

/* CURSOR */
a,a:link,a:visited,a:active,a:hover {
cursor:url(http://),default;
}

tu juga link untuk kursor.

global font :

/* GLOBAL FONTS */
.usercontent {
font-family: comic;
color: pink;
text-transform: lowercase;
}

tu untuk font ( hurup ). ganti juga klo kamu tau nama font yang kamu inginkan itu.
sekalian warna font nya juga diganti ga apa apa.

global link :

/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent a:visited,
.usercontent a:hover, .usercontent a:active {
font-family: comic;
color: pink;
text-transform: lowercase;
}

tu untuk global link nya.

global link hover :

/* GLOBAL LINKS HOVER */
.usercontent a:hover {
color: black;
text-decoration: none;}

tu untuk global link hover nya.

master boxes :

/* MASTER BOXES */
.commonbox {
background-image: url(url gif lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}
.commonbox .evenrow {
background-image: url(url gif lo);
background-position: ;
background-repeat: ;
background-color: transparent;
}

tu yang warna merah dapat di ganti.

master headers :

/* MASTER HEADERS */
.commonbox h1, .commonbox h2 {
background-image: url
(http://img167.imageshack.us/img167/9771/6113e16hpe4atmad7.gif);
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
font-family: comic;
color: black;
text-transform: none;
border: pink 3px inset;
}
tu juga edit aja klo mau. gambarnya di cek dulu.


bullets :

/* MAIN BOXES: BULLETS */
.controlpanel .q {
background: url() no-repeat center left;
padding: 0 0 0 25px;}
.usercontent .q{
background: url(http://img397.imageshack.us/img397/2941/thrbv1.gif)
no-repeat left;
padding: 0 0 0 16px;}

tu untuk bulet2nya noh.

control panel :

/* CONTROL PANEL: BOX */
.controlpanel {
background-image: url(url gif lo);
background-attachment: ;
background-position: ;
background-repeat: ;
background-color: transparent;
border-width: 1px;
border-color: transparent;
border-style: dotted;
}

edit juga dah.


control panel user poto :

/* CONTROL PANEL: USER PHOTO */
.controlpanel .imgblock200 {
border-width: 2px;
border-color: black;
border-style: groove;
}
edit juga.

control panel data :

/* CONTROL PANEL: DATA */
.controlpanel .q {
font-family: comic;
color: pink;
text-transform: lowercase;
}
.controlpanel .data {
font-family: comic;
color: pink;
text-transform: lowercase;
}
.data a {
font-family: comic;
color: pink;
text-transform: lowercase;
}
a.more {
font-family: comic;
color: pink;
text-transform: lowercase;
}
edit juga.

control panel buttons :

/* CONTROL PANEL: BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link,
#controlPanelButtons a:visited {
background-image: url
(http://th265.photobucket.com/albums/ii207/THOMAS_F13/th_pixels-15.gif);
background-color: black;
border-width: 2px;
border-color: pink;
border-style: dotted;
font-family: comic;
color: pink;
text-transform: lowercase;
}

#controlPanelButtons
a:hover {
background-image: url(url gif lo);
background-color: transparent;
border-width: 2px;
border-color: black;
border-style: dotted;
font-family: comic;
color: pink;
text-transform: lowercase;
}
edit juga. tu url buat background control panel loh.

box more about me :

/* BOX: MORE ABOUT ME */
.moreabout {
background-image: url(url backgrond nya);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}
edit juga tuh.

box my galery :

/* BOX: MY PHOTO GALLERY */
.photos {
background-image: url(beckgrond lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

edit terus.

kolom frendlist :

/* ONE COLUMN FRIENDS LIST */
.friends { /*box*/
background-image: url(url beckgron lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
margin-left:0; margin-right:0; margin-top:0px; margin-bottom:0;
padding-left:0px; padding-right:0; padding-top:0px; padding-bottom:5px
}

.friends div.boxcontent{width:100%;text-align:center;}
.friends.flogrid75{text-align:center;width:75px;}
.friends div.viewall a{text-align:center;width:100%;padding-left:20px;}

edit cuy.

box frenlist, video, grup, dkk :

/* BOX: MY FRIENDS */
.friends {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

/* BOX: MY VIDEOS */
.videos {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

/* BOX: MY GROUPS */
.groups {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

/* BOX: MY TESTIMONIALS */
.testimonials {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

/* BOX: MY PUBLICCOMMENTS */
.publiccomments {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

/* BOX: MY SCRAPBOOK */
.scrapbook {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

/* BOX: FAN OF */
.fanof {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

/* BOX: MY FANS */
.myfans {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

/* BOX: MY REVIEWS */
.reviews {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

/* BOX: MY BLOGS */
.blogs {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

/* BOX: MY BLOG REVIEWS */
.blogsreviews {
background-image: url(url lo);
background-position: top center;
background-repeat: repeat;
background-color: transparent;
border-width: 2px;
border-color: pink;
border-style: dotted;
}

edit2 aja dah.


lanjutannya :

/* MISC: COMMENTS/TESTIMONIALS TEXT */
.data {
font-family: comic;
color: pink;
text-transform: lowercase;
}

/* MISC: VIEW ALL AND EDIT LINKS */
.commonbox .viewall, .commonbox .editlink {
padding: 4px 11px;
font-family: comic;
color: pink;
text-transform: lowercase;
font-weight: bold;
}
.commonbox .editlink {
float: right;
}

/* MISC: SMALL PHOTOS */
.commonbox .imgblock75, .ir {
border-width: 5px;
border-color: pink;
background: transparent;
border-style: outset;
}
/* MISC: SMALL PHOTO NAMES */
.commonbox .dr {
font-family: comic;
background-color: pink;
}
tu edit terserah juga ga.

logo diatas navigasi ni :


/* PERSONALIZED LOGO */
#navigation {
background-color: transparent;
border: 6px groove pink;
margin:10px 0 30px 0;
padding:260px 0 0 0;
background-image: url
(http://i331.photobucket.com/albums/l449/mizzjutex12/headeraz1.jpg);
background-attachment:scroll;
background-repeat: no-repeat;
background-position: center center;
}

#mainnav div.links a:link, #mainnav div.links a:visited,
#mainnav div.links a:active { color: pink; text-decoration:none; }
}
#mainnav .left {display:none;}
#mainnav .right {display:none;}
#navdivider {display:none;background:transparent;}
#subnav {display:none;}
#marketing_bg{display:none;background:transparent;}

tu url nya ganti gambar punya lo ndiri.

navigasi :


/* main navigation */
#mainnav {
margin:0 0 10px 0;
padding:0 0 2px 0;
width:100%;
font-size:9px;
font-weight:bold;
background: url() fixed no-repeat center; pink;}


/* MAIN NAVIGATION LINKS */
#mainnav, #mainnav .left, #mainnav .right {
background-color: transparent !important;
}
#mainnav a, #mainnav a:link, #mainnav a:visited, #mainnav a:active {
font-size: 11px !important;
color: pink !important;
background-color: transparent !important;
text-decoration: none !important;
}
/* #2 */
#mainnav a:hover {
font-size: 11px !important;
color: pink !important;
background-color: transparent !important;
text-decoration: none !important;
}
/* #3 */
#mainnav span {
color: pink !important;
}
kamu edit aja dah cari ndiri yang mana yang penting.

shout box :

/* SHOUTBOX */
.somsg { background-image:url('none') !important;  color: pink;
background-color:transparent ! Important; }
.so {background-image:url('none') !important;  
background-color:transparent ! Important ; }
.soc { background-image:url('none') !important; 
background-color:transparent ! Important ; }
#delShoutoutForm {background-image:url('none') !important;  
background-color:transparent ! Important ; }
#cpShoutoutBox { background-image:url('none') !important;
background-color:transparent ! Important ; }
#shoutoutForm { background-image:url('none') !important; 
background-color:transparent ! Important ; }
.disabled normal { background-image:url('none') !important; 
background-color:transparent ! Important ; }
.divider { background-image:url('none') !important; 
background-color:transparent ! Important ; }
.fakeLink { background-image:url('none') !important; 
background-color:transparent ! Important ; }
.sol {background-image:url('none') !important;  
background-color:transparent ! Important ; }
.sob { background-image:url('none') !important; 
background-color:transparent ! Important ; }
.commonbox .imgblock75 { background-image:url('none') !important; 
background-color:transparent ! Important }
.ir { background-image:url('none') !important; 
background-color:transparent ! Important }
.flogridp .flogriditem { background-image:url('none') !important; 
background-color:transparent ! Important }
.dr { background-image:url('none') !important; 
border:none ! Important }
.fitem1wrapper { background-image:url('none') !important;
background-color:transparent ! Important }
.controlpanel .so a, .minicontrolpanel .so a { color: pink !important; }
kalo ga mau ribet ya udah contek itu aja.

box recent update :

/* RECENT UPDATE BOX*/
.user_tracker {
color: pink;
background-color: transparent;
background-image: url();
background-position: center center;
background-repeat: repeat;
border-width: 3px;
border-color: black;
border-style: dotted;
}
.user_tracker a, .user_tracker a:link,
.user_tracker a:visited, .user_tracker a:active {
font-family: comic;
font-size: px !important;
font-weight: normal !important;
color: pink !important;
text-decoration: none !important;
}
.user_tracker a:hover {
font-family: comic !important;
font-size: px !important;
font-weight: bold !important;
color: pink !important;
text-decoration: none !important;
}
edit aja.

title bar, dkk :


/* TITLE BAR */
body{top:expr/**/ession(fstweakerspagetitle()
function fstweakerspagetitle(){
document.title = 'WiSh To hAvE YoU hErE SoMedAy T_T
-->layout by:ariez88(www.friendster.com/ariezcpd)';
});}

/* STATUS BAR*/
body{bottom:expr/**/ession(
function fstweakersstatus()
{window.status=''}
if (document.layers)
document.captureEvents(Event.mouseover)
document.onmouseover=fstweakersstatus);}

/* HIDE CONNECTION BOX */
#meettrail{display:none;background:transparent;}

/*HIDE GOOGLE ADS */
#googleAdFactory.fullwidth{position:absolute;top:-5500px;}

/* REMOVE SEARCH FORM*/
#search {display:none;background:transparent;}
#search form {display:none;background:transparent;}
.banner_ad_fix{display:none;}
#banneradrow, #ads_2_3{display:none;}

/* REMOVE MORE ABOUT*/
.controlpanel p {display:none;}

/* HIDE FRIENDSTER LOGO */
#f_logo {
display: none !important;

/* IMAGE EFFECTS */
img { filter:alpha;}
a img{ filter:FlipH(Opacity=100, FinishOpacity=0,
Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0);}
a:hover img{  Filter: xray(Opacity=100,FinishOpacity=0,Style=3);}


* LEFT SIDE SCROLLBAR */
body {
direction: rtl;
}
td, tr, div, p {
direction: ltr;
}

#controlpanelbuttons a {width:202px!important}

*WELCOME & GOODBYE ALERT*
/* Welcome Alert Box*/
body {height:expr/**/ession(
function welcome()
{alert('Hi!  '+parent.pageViewerFName+' Met Datank D Profil W');}
window.onload=welcome);

/* Goodbye Alert Box*/
body{left:expression(
function goodbye()
{alert('makasih dah mampir =)');}
window.onunload=goodbye);}

tu semua edit2 aja sesuka hati lo. tapi ya jangan asal2an.
ntar yang ada malah ga jadi layout. hehe.

good luck !

__ariez__

A R I E Z 8 8

Mengenai Saya

Kamis, 04 September 2008

Cara Bikin CSS Layout

Tidak ada komentar:

Other Link

Arsip Blog