Cara Membuat Website
Selamat datang di bagian Cara Membuat Website kali ini kita akan coba membuat website di multiply. Pada bagian pembuatan website ini kami hadir untuk membantu bagi para pengguna atau pemilik komputer yang ingin mempelajari pembuatan Website yang sederhana di MP. Didalam Website ini kami akan memberikan tips and trik bagaimana cara membuat website yang sederhana namun menarik. Sehingga Anda dapat membuat website dengan tangan Anda sendiri.......
Didalam pembuatan Website kita harus mempunyai kreativitas dan daya imajinasi yang tinggi agar website kita terlihat menarik walaupun bentuknya sederhana.
baiklah kita akan mulai membuat website di multiply.
langkah pertama...buka internet explorer atau Firefox setelah itu buka URL(Uniform Resource Locator) dengan alamat, http://www.multiply.com/ maka akan muncul tampilan seperti di bawah ini
klik join for free,
maka akan muncul tampilan seperti di bawah ini
selanjutnya isilah kolom isian di atas dengan lengkap, kalau sudah selesai klik REGISTER. kemudian klik connet.maka akan tampil pilihan theme yang bisa anda pilih, pilihlah sesuka hati anda,,,
langkah pertama selesai, selamat anda telah mempunyai alamat URL Di Multiply.
langkah kedua untuk yang merasa masih kurang berselera dengan theme yang sudah di sediakan oleh MP dan tidak ada CSSnya maka cara ini arus di tempuh:
clik tulisan Check out http://customizedthemes.multiply.com,
yang terletak di bawah gambar theme. maka akan tampil gambar seperti di bawah ini
setelah itu carilah tulisan VIEW ALL.untuk meliat semua theme yang ada, dan enaknya pasilitas yang disediakan dilengkapai dengan HTML,seperti contoh HTML berikut ini :
1. buka My Customize My Site trus klik, Custom Theme
2. pilih Melon theme untuk dasarnya
3. klik kembali Customize My Site,kemudian Custom CSS
4. Copy code HTML di bawah ini Paste di Custom CSS , klik Save
5. selesai
HTML mulai dari sini
body {
width: auto;
background: url(http://i238.photobucket.com/albums/ff275/shinichichrist/musicbackground.jpg) repeat-x fixed;
color: #000;
}
div.bodywrap, div.contentwrapper {
background: none transparent;
}
div.header, table.globalnav {
width: 760px;
margin: 0 auto;
background: none transparent;
border: none;
}
div.header {
padding-top: 15px;
}
table.globalnav {
width: 740px; margin: 0 auto;
}
div.header ul.gnopt li.gnopt a, div.header ul.gnopt li.gnoptsel a,
span.signoutid a, span.signoutid a:link, span.signoutid a:visited { color: #006699; }
a.signout, a:link.signout, a:visited.signout { color: #aa5; }
div.header ul.gnopt li.gnopt a:hover, div.header ul.gnopt li.gnoptsel a:hover,
span.signoutid a:hover, a:hover.signout { color: #fff; }
div#owner_nav_wrapper, div.owner_nav, div.owner_nav,
h1#page_owner_title, div#subnavc, div#subnav {
width: 760px;
margin: 0 auto;
background: none transparent;
border: none;
}
div.header, div#owner_nav_wrapper {
background: url(http://i238.photobucket.com/albums/ff275/shinichichrist/topmusic-1.png);
background-repeat: no-repeat;
background-color: none;
}
div.header { background-position: 50% 0px; }
div#owner_nav_wrapper {
padding-top: 120px;
height: 73px;
background-position: 50% -67px;
}
h1#page_owner_title {
width: 635px;
height: 40px;
margin: 0 auto;
margin-left: 85px;
padding: 0;
text-align: left;
color: #CCFFFF;
font-size: 24px;
}
div#subnavc, div#subnav {
width: 600px; margin: 0 auto;
}
div#subnav div.topt a {
width: 50px;
height: auto;
margin: 0px;
padding: 5px 10px;
line-height: 1em;
display: block;
float: left;
text-align: center;
font-size: 11px;
font-weight: normal;
background-color: #009999;
background: url() repeat-x;
border: none;
-moz-border-radius: 5px;
color: #fff;
}
/*before click*/
div#subnav div.topt a:hover.topt {
color: #66CCFF;
background: url(http://i238.photobucket.com/albums/ff275/shinichichrist/hovermusic.png) repeat-x;
}
/*after click*/
div#subnav div.a.toptsel, a:visited.toptsel, a:link.toptsel, div#subnav li.gnoptsel, a:hover.toptsel, a:link:hover.toptsel, a:visited:hover.toptsel {
display: block;
background: url(http://i238.photobucket.com/albums/ff275/shinichichrist/hovermusic.png) repeat-x;
width : 50px;
background-color: #20A6B2;
border-color: #20A6B2;
color: #66CCFF;
}
table#content_wrapper, td#content-start,
div#page_start_wrapper, div#page_start {
width: 760px;
margin: 0 auto;
padding: 0;
background: none transparent;
}
table#content_wrapper {
background-image: url(http://i238.photobucket.com/albums/ff275/shinichichrist/musicbackbody.png);
background-repeat: repeat-y;
background-position: 50% 0px;
background-color: transparent;
}
td#maincontent { margin: 0; padding: 15px 0 0 20px; }
div#page_end, div#ownedfooterc, div#ownedfooter {
width: 760px;
margin: 0 auto;
padding: 0;
background: none transparent;
border: none;
font-size: 10px;
text-align: center;
color: #040;
}
div#page_end {
height: 34px;
padding-top: 5px;
padding-bottom: 5px;
background-image: url(http://i238.photobucket.com/albums/ff275/shinichichrist/topmusic-1.png);
background-repeat: no-repeat;
background-position: 50% -256px;
background-color: none;
}
div#ownedfooter br { line-height: 0.5em; }
td.rail, div.rail, div#rail, .railstart, .railbody, .railend, .railbottom,
.railsep, .railsubsep {
width: 150px;
margin: 0 auto;
padding: 0;
background: none transparent;
color: #aa5;
}
.railstart { display: block; height: 15px; }
.railstart, .railbody, .railend, .railbottom, .railsep, .railsubsep {
width: 140px;
margin: 0 auto;
}
td.rail div#rail .railbody .userlogo {
padding: 5px;
background: none #006666;
border: 1px solid #006699;
}
td.rail h4, div#rail p { color: #240; text-align: center; }
div#rail iframe { margin-left: 5px; }
/* box */
.itemboxsub, .itemshadow, .rolloverfordnd,
.calendarwrapper, .tablediv1 { max-width: 590px; }
.calendarwrapper, .tablediv1 { width: 590px; }
.itemboxsub, .icon, .cattitle, .itemsubsub, span.update {
background: none transparent;
}
.itemboxsub {
background-color: transparent;
border: 1px solid #040;
border-bottom: none;
}
.cattitle { color: #fff; }
.itemsubsub, span.update { color: #040; }
.itemshadow, .itembox, .albumthumbnails, .videothumbnails, .album {
background: none transparent;
border: none;
}
.itembox {
border: 1px solid #040;
}
.itembox, .albumthumbnails, .videothumbnails, .album {
color: #ffe;
overflow-x: visible;
}
span.voptlabel, div.calendarwrapper { color: #aa5; }
a.voptsel, a:link.voptsel, a:visited.voptsel {
background: none #2d4017;
color: #fff;
border: 1px solid #2d4017;
}
table.itemboxsub { border: none; }
td.caltitle { color: #fff; }
.calendarwrapper, .caldiv1, .caldiv1 table, td.calday,
.caldiv1 td.calday, .caldiv1 td:hover.calday, .cald, .caldate,
.calevent, .caldiv1 td, .caldiv1 td:hover { background: none transparent; }
.caldiv1 {
filter: alpha(opacity=65);
opacity: 0.65;
-moz-opacity: 0.65;
-khtml-opacity: 0.65;
background: none #2d4017;
}
.cald {
border-color: #2d4017;
margin-top: -3px;
margin-right: -3px;
}
.caldiv1 th {
background: none #243313;
color: #fff; }
.caldiv1 td.calday, .caldiv1 td:hover.calday, .caldiv1 td, .caldiv1 td:hover {
filter: alpha(opacity=85);
opacity: 0.85;
-moz-opacity: 0.85;
-khtml-opacity: 0.85;
background: none #6e8059;
}
.calevent { color: #66CCFF; }
/* kotak */
.tablediv1 th {
background: none #243313; color: #fff;
}
.tablediv1 tr.bg2, .tablediv1 tr:hover.bg2 {
background: none transparent;
}
i.bodysummary {
color: #aa5;
}
div.musicwrapper { border-bottom: 1px solid #006699; }
table.musictable td { border-top: 1px solid #006699; }
table.m td, div.add_sublabel, .replyboxstamp { color: #ffa; }
/* buku tamu */
table#table_reply textarea {
background: none #66CCFF;
border: 1px solid #006699;
-moz-border-radius: 5px;
color: #240;
filter: alpha(opacity=50);
opacity: 0.50;
-moz-opacity: 0.50;
-khtml-opacity: 0.50;
}
.replybox, .replyboxodd, .replyboxread, .quotet, .quotea,
.homwrapper .itembox .replybox {
background: none transparent;
color: #420;
overflow-x: auto;
}
.replybox, .replyboxodd, .replyboxread { border-top: 1px solid #040; }
div#itemreplyform { border: none; }
.quotet {
border: 1px solid #040;
-moz-border-radius: 5px;
color: #440;
}
.replyboxread { background: none #006666; }
.replydeleted { color: #888; }
/* Viewing history */
div#viewing_history_holder, div#viewing_history, div.stats div.infobox,
div.stats div.infobox .boxbody, div.infobox .boxbody {
background: none transparent;
border: none;
color: #aa5;
}
div.stats div.infobox { border: 1px solid #040; }
.userlogo, .contactbox, div.stats div.infobox .boxbody .userlogo {
background-color: #006666;
border: 1px solid #006666;
color: #CCFFFF;
}
/* Miscellaneous boxes */
div.infobox b.cn, div.sidebox b.cn { display: none; }
div.infobox, div.sidebox, div.box,
div.sidebox div.boxhead, div.sidebox div.boxbody {
background: none transparent;
}
div.sidebox, div.sidebox div.boxhead, div.sidebox div.boxbody,
div.box, div.box div.boxbody { border: none; }
div.infobox .boxbody h1, div.boxhead h2, h1.page_subtitle { color: #66CCFF; }
.raileditlist h4, h4.page_subtitle { color: #fff; }
div.sidebox div.boxbody td { color: #aa5; }
/* links */
a, a:link, a:visited { color: #006699; }
a:hover { color: #66CCFF; text-decoration: none; }
div.add_sublabel a, div.add_sublabel a:link,
div.add_sublabel a:visited { color: #006699; }
div.add_sublabel a:hover { color: #66CCFF; }
div.ritemactions a, div.ritemactions a:link,
div.ritemactions a:visited { color: #006699; }
div.ritemactions a:hover { color: #66CCFF; }
div.stats div.infobox .boxbody .userlogo a,
div.stats div.infobox .boxbody .userlogo a:link,
div.stats div.infobox .boxbody .userlogo a:visited { color: #fff; }
div.stats div.infobox .boxbody .userlogo a:hover { color: #66CCFF; }
td.rail div#rail .railbody .userlogo a, td.rail div#rail .railbody .userlogo a:link,
td.rail div#rail .railbody .userlogo a:visited { color: #fff; }
td.rail div#rail .railbody .userlogo a:hover { color: #66CCFF; }
ul.sidelist li a, ul.sidelist li a:link, ul.sidelist li a:visited {}
ul.sidelist li a:hover { color: #66CCFF; }
div.stats div.infobox .boxbody a, div.stats div.infobox .boxbody a:link,
div.stats div.infobox .boxbody a:visited { color: #006699; }
div.stats div.infobox .boxbody a:hover { color: #66CCFF; }
div.infobox .boxbody a, div.infobox .boxbody a:link,
div.infobox .boxbody a:visited { color: #006699; }
div.infobox .boxbody a:hover { color: #66CCFF; }
div#ownedfooter a, div#ownedfooter a:link,
div#ownedfooter a:visited { color: #006699; }
div#ownedfooter a:hover { color: #fff; }
/* BUTTON GUESTBOOK */
/* before clicked */
div#home_guestbook td#cell_submit input {
background: url(http://i238.photobucket.com/albums/ff275/shinichichrist/replybuttonnormal.png) no-repeat;
width : 80px;
height: 22px;
border : none;
color: FFF;
font-weight: bold;
font-size: 11px;
text-align: center;
}
/* when clicked */
div#home_guestbook td#cell_submit input:hover {
background: url(http://i238.photobucket.com/albums/ff275/shinichichrist/replybuttonhover.png) no-repeat;
width : 80px;
height: 22px;
border : none;
color: #000;
font-weight: bold;
font-size: 11px;
text-align: center;
}
span.textarea-handle {
display : none;
}
selesai......
hal ini memungkinkan anda untuk berkreasi sendiri dan bisa merubah tampilan theme denang memperhatikan / merubah sedikit demi sedikit HTML seperti di atas.selamat mendesign sesuka hati anda......selamat berkreasi......
...tetaplah bersama erikshare......
Sabtu, 20 Maret 2010
