Just Another Me..

Hiii yahh.. cmon babe step by step kita mulai ya belajar ganti theme Multiply. Sambil minum kopi.. ok? Jadi begini, sebelon kita bicara css, ada yang harus kamu siapkan dulu, yaitu:

Photohosting.

Photohosting itu adalah hosting tempat kita simpan foto atau image, yang akan kita butuhkan URLnya untuk dimasukan ke dalam css.

Yang gampang register aja disini.

Setelah daftar, nanti kamu tinggal upload image yang mau kamu taro disitu, then akan muncul tuh URLnya seperti begini: http..blabla..

Color Scheme

Color Schemes itu adalah color generator. So kamu bisa pilih warna apa yang match, mau warna redup atau genjreng, tanpa perlu pusing lagi padu padannnya. Kadang kan suka ya lihat blog yang warnanya norak? Perpaduannya ga matching gitu? Nah itu namanya asal2an, kalo mau serius, coba bikin theme pakai tools yang tepat, ok? Ini URL Color Scheme yang aku referensikan buat kamu.

Paintshop, Adobe Photoshop atau Gimp

Nah, sekarang, kita mulai menggambar image. Pake program apa aja yang kamu punya. Kalo aku pake Gimp. Terserah pake apa aja, yang penting, kamu bisa bikin gambarnya, ok?

Kita mulai ya..

Step 1.

Bikin image ukuran 800 x 600 (px). Sample:


Lalu, kita potong (crop) image bagian header (kepala), ukuran bebas sesuai kebutuhan, misal 800 x 250px. Sample:


Lalu, buat content, kita potong image buat nanti di repeat sumbu y. Sample:




Lalu, kita siapkan image buat backgorund. Sample:



Sekarang, urusan image beres. Tinggal masuk ke bagian yang pusingnya. Css.

Cara meng-customize-kan theme kita, langkahnya begini:

Setting->My Site->Pilih Theme yang Shadow Box->Custom css->Masukin css ini: Download aja ya disini atau kamu copy css yang ada dibawah..


How to "install" this theme:

1) Select the "Shadow Box" theme from the Multiply theme selection page for your personal page. You

can select that by clicking on this link: http://multiply.com/setup/pages/themes/shadowbox

2) Copy and paste the CSS code below to the CSS page on your setting page. The link for the

Custom CSS page is this one: http://multiply.com/setup/pages/upload-css

Notes:
1. If you want to be able to restore the previous theme, remember to backup
the CSS file that is already installed on the settings page.
2. Please DON'T alter the codes to avoid unpleasant results.
3. If you are using sliders more than "width: 500px" this may not be a good theme for you to use.
4. This theme is best viewed "1024x768"
5. Strictly for Multiply Account users ONLY.

*************************************************************************************
Bird Theme
By: Tina http://stifter.multiply.com
Based on Multiply's Shadow Box THEME
01 Dec. 2006


**************************************************************************************

/* ini untuk background, 
image URLnya tinggal kamu replace aja */

body {background: #E444B9
        url("http://i99.photobucket.com/albums/
        l291/zeventina1/bird_bg.jpg"); 
        background-repeat: repeat }
	color: #000000;
	margin: 0;
	width: auto;
}
a, a:visited, a:link { color:#64AEC0; }
.rail {
	width: 109px;
}
.railstart {
	display: none;
}
.railbody {
	width: 109px;
	font-size: 12px;
	background: none;
	border: none;
	z-index: 1000;
}

/* ini iklan google, warna bgnya kamu 
ganti aja sesuaikan ama warna bg blog */

.railsep {
	height: 1px;
	margin: 12px 0 12px 0;
	background: none;
	background-color: #E4A8CA;
}
.railend {
	display: none;
}


/* ini untuk content, image URLnya 
tinggal kamu replace aja */

div#page_start_wrapper {
	width:800px;
	margin: 0 auto;
	background: url(http://i99.photobucket.com
        /albums/l291/zeventina1/bird_content.jpg);
}

/* ini untuk header, image URLnya 
tinggal kamu replace aja */

div.owner_nav {
	width: 800px;
	margin: 0 auto;
	margin-top: 0px;
	height: 224px;
	border: none;
	background: url(http://i99.photobucket.com/
        albums/l291/zeventina1/bird_h.png);
}
div#subnavc {
	width: auto;
}
div#subnav {
	padding: 5px 30px 0 300px;
	border: none;
	background: none;
	height: auto; 
}
a.topt, a:visited.topt, a:link.topt {
	line-height: 1.5em;
	display: block;
	float: left;
	height: auto;
	text-align: center;
	background: #85C1C1;
	font-size: 11px;
	color: #520553;
	padding: 1px 7px 1px 7px;
	width: auto;
	border: 1px solid #EBDFCF;
}
a.toptsel, a:visited.toptsel, a:link.toptsel {
	line-height: 1.2em;
	display: block;
	float: left;
	height: auto;
	text-align: center;
	background: none;
	font-size: 13px;
	font-weight: bold;
	color: #000;
	background: none;
	background-color: #C7D1DD;
	border: 1px solid #EBDFCF;
	padding: 1px 7px 1px 7px;
	width: auto;
}

h1#page_owner_title {
	padding:170px 50px 6px 40px;
	font-size: 10px;
	height: 12px;
	background-color: #fff;
	background-color:#fff;
	background-color: none;
	background: none;
	color: #fff;
	border: none;
	font: 1pt Arial;
}
div#page_start {
	padding: 10px;
	
}
div#rail {
	text-align: left;
	width: 109px;
}

/* ini untuk footer, image URLnya 
tinggal kamu replace aja */

div#ownedfooterc {
	background: url(http://i99.photobucket.com/
        albums/l291/zeventina1/bird_content.jpg);
	width: 800px;
	height: 53px;
	margin: 0 auto;
}
div#ownedfooter {
	border: none;
	background: none;
	color: #999;
	padding: 0;
	text-align: center;
	font-size: 10px;
	border-top: 1px solid #ddd;
	margin: 0 15px 0 15px;
}
div.stats {
	border-bottom: none;
}

.itemboxsub {
	color: #64AEC0;
/*
	background-color: #d3ddee;
	background-color: #ecf2f9;
*/
	font-weight: bold;
	font-size: 22px;
	border: none;
	background: none;
}
.rolloverfordnd {
        color: #D10560;
        font-weight: bold;
        font-size: 22px;
        border: none;
        background: none;
        background-color: #eee;
	max-width: 540px;
}

.itemshadow {
    max-width: 540px;
    width: 100%;
}

td.icon {
	padding-left: 5px;
}
.itemsubsub {
	font-size: 10px;
	font-weight: normal;
	line-height: 1.2em;
	text-align: left;
	color: #000;
}
.itemstamp {
	float: right;
	font-size: 10px;
	font-weight: normal;
	margin: -5px 0 5px 0;
	color: #3B023C;
}

/* ini untuk box di content, warna bg bisa kamu 
ubah sesuai selera */

.itembox, .itemboxalbum {
	padding: 10px 10px 10px 10px;
	margin: 0px;
	color: #3B023C;
	overflow: visible;
	background: none;
	background-color: #C7D1DD;
	border: 1px dashed #ccc;
	border: none;
}
.itemactionspacer {
	height: 30px;
}
.rail .userlogo {
	border: 1px solid #999;
}
.caldiv1 { background-color: #ccc; }
.caldiv1 td { font-size: 10px; }
.caldate { font-size: 13px; font-weight: bold;}
.cald { float:right; text-align: center; 
background-color: #fff; padding: 0px 4px 0px 4px; 
margin: -3px -3px 3px 3px; border: 1px solid #ccc; width: 20px}
.calevent { margin: 0px 0px 8px 0px; }
.caldiv1 td:hover { background-color: #fff; }
.caldiv1 th {
	background-color: #ccc;
	color: #000;
	font-size: 10px;
	font-weight: normal;
	text-align: center;
}
.caldiv1 th a, .caldiv1 th a:visited { color: #fff; }
a.compose:hover {
	text-decoration: underline;
}
span.fakelink {
	color:#8E95B2;
}
table.globalnav {
	border-top: 1px solid #43423A;
	border-bottom: 1px solid #43423A;
	background-color: #EEFECF;
}
div#ownedheader a:link, div#ownedheader a:visited, 
div#ownedheader a { color:#D40AD6; }
.header a:link, .header a:visited, .header a { color:#64AEC0; }
.navinput {
	border: 1px solid #999;
	color: #3B023C;
}
.header .globalnav div.gndd a { color: #D40AD6; 
border: 1px solid #eee }
div.gndd {
	background-color: #eee;
	border: 1px solid #ccc;
}
div.ddsep { background-color: #ccc; }
div#rail div.userlogo {
/*	width: 65px;
	height: 65px;
	margin: -88px 0 20px 63px; */
	padding: 0;
	border: none;
        
}
td.rail {
	border-left: 1px solid #ddd;
}
a.mine, a:link.mine, a:visited.mine {
	font-size: 12px;
	font-weight: normal;
	color: #5B032A;
}
div.viewmore {
	margin: 0;
	font-size: 12px;
	border-top: 1px dashed #ddd;
	border-bottom: 1px dashed #ddd;
}
div.itemactions {
	border-top: 1px dashed #ddd;
	border-bottom: 1px dashed #ddd;
}
div.ritemactions a, div.ritemactions a:link, 
div.ritemactions a:visited {
	font-size: 12px;
	font-weight: normal;
	color: #5B032A;
}

/* ini untuk navigation yang di header, 
ukuran bisa diubah sesuai selera */

table.indextitle {display: none}
td#maincontent { padding: 0 10px 20px 50px;}
border-top: 1px dashed #ddd;
span.tagtitle {
	color: #5B032A;
}
.prevnext {
	margin-top: -25px;
	position: relative;
}
div.icon {
	display: none;
	float: left;
}
div.openbox {
	margin: 0 0 5px 0;
}
div.guidebox {
	background: none;
	background-color: #eee;
	border: 1px solid #ccc;
}
b.cn { display: inline; } 
div#ownedfooter b.cn, .header b.cn { display: none; }

Theme ini screenshotnya kaya gini..