Sebenernya agak sedikit telat kalo gue ngebahas ini. Soalnya udah keburu diliat. Well, gue mau ngomongin soal layout MP gue.
Ngubah2 layout sebenernya adalah salah satu kesenengan gue. Itu juga kalo gue bisa tentunya. Kalo di FS, gue ngubah layoutnya 2 minggu sekali. Ga ada yg mengharuskan tentunya, Cuma rasanya emang enak aja kalo layout FS gue ganti2. Dan emang gue sedikit bosenan. Ditambah lagi di FS, gue udah bisa ngubah2 layout lumayan gampang.
Setelah itu layout blog2 gue yang di blogspot. Nambah content2nya, nambah icon2, yang kebetulan kalo di blogspot ga disediain. Jadi emang rada harus ngakal2in. Dan tentunya dikesemua itu kesamaannya adalah gue harus berkutat dengan kode2 itu. Ah, emang lemah ya gue kalo harus nyebut istilahnya. Pokonya kode2 itu lah..
Awalnya gue ngerti ya dari FS itu, tapi makin ditambah ama temen kantor gue, yang namanya Mas Yadi. Kurang lebih dia yang ngajarin deh.
Dan kali ini, gue mencoba, memberanikan diri (hehehe.. lebay), untuk ngubah2 layout MP gue ini. Dengan berbekal pengetahuan sendiri, ajarannya Mas Yadi, dan tentunya ga ketinggalan Abe.
Ya, gara2 Abe, makin lengkaplah sudah. Hehehe.. lebay lagi.
Eniwe, untuk gambarnya sendiri gue pake gambar kartun bikinan Pak Rahmat yang biasa gue panggil Om Jeje. Hehe, soalnya keponakannya pada manggil gitu. Berhubung keponakannya ama gue kenal dan seumuran, gue ikut2an aja manggilnya Om Jeje.
Om Jeje ini temen gue dikantor lama. Dia designer grafis jagoan!! Tapi gambar kartun bikinan Om Jeje ini ga bener2 seratus persen yang gue pake. Gue utak-atik dulu dengan sentuhan gue tentunya.
Dan tentunya semuanya bener2 memberi kail buat gue. Kail yang gue utak-utik untuk dapetin ikan yang gede. Hahaha.. agak sedikit gue belok2in dari kata2 yang umum, memberi kail bukan memberi ikan
Special thanks buat
-Mas Yadi yang bikin gue kenal ‘script html’ dan semacam itu. Dulunya gue hanya ngeliat kode2 itu sebagai kode2 ngejlimet yang males utk diliat.
-Om Jeje, u’re my truly teacher!! Sumpee, banyak banget hal2 dunia design grafis yg gue tau banyak dari dia.
-Abe, thank u so much for a very big help for me!
Hmm, kaya tulisan thanks2 di cover2 album ya.. huehehe.. Biarin lah, they deserve it.
Eniwe, kalo mau tau kode2nya ini diaaa, kali2 aja ada yang mau dan diedit2 utk jadiin layoutnya seperti yang dimau:
background-image: url(http://i246.photobucket.com/albums/gg104/close2mrtj/headerMP3.jpg);
background-repeat:no-repeat;
background-position:center right;
background-attachment: fixed;
background-color: #EFCF4C;
color: transparent;
font-family: trebuchet MS;
font-size: 8pt;
margin-top: 40px;
margin-bottom: 40px;
cursor: default;
line-height: 20px;
}
a, a:visited, a:link { color: #ff0000;
}
.rail {
width: 139px;
}
.railstart {
width: 139px;
height: 0;
background-color: #fff;
background: none;
border: none;
margin-top: -20px;
}
.railbody {
width: 90px;
background-color: none;
font-size: 12px;
background: none;
border: none;
z-index: 1000;
position: relative;
color: none;
}
.railsep {
height: 1px;
margin: 12px 0 12px 0;
background: none;
background-color: transparent;
}
.railend {
width: 20px;
height: 10px;
background: none;
margin: 0 0 8px 0;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
background-color: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: none;
border: none;
}
.contactbox {
float: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-right: 15px;
margin-bottom: 15px;
font-size: 11px;
text-align: center;
background-color: transparent;
color: #ddd;
border: 1px dashed #765;
}
.rail .userlogo {
background-color: transparent;
color: #ddd;
width: 100px;
font-size: 8px;
text-align: left;
-moz-border-radius: 15px 15px 15px 15px;
border: 1px solid #93A5D3;
}
.userlogo {
background-color: transparent;
color: #ddd;
width: 100px;
font-size: 10px;
text-align: left;
-moz-border-radius: 15px 15px 15px 15px;
border: 1px solid #93A5D3;
}
div.owner_nav {
border: none;
margin: 5 auto;
margin-top: 5;
height:400px;
height: 370px;
width: 640px;
border: 5px solid #151410;
border-bottom: 5px;
padding: none;
background: url(http://i246.photobucket.com/albums/gg104/close2mrtj/headerMP2.jpg);
background-color: transparent;
}
div#subnavc {
: auto;
margin: 0 auto;
text-align: center;
font-size: 10px;
padding-left: 250px;
padding-right: 0px;
position: relative;
top: 300px;
right: 0px;
bottom: 0px;
left 250px;
}
div#subnav {
padding: auto;
background-color: #000;
background: none;
height: auto;
width:350px;
margin: 0 auto;
text-align: center;
background: none;
}
a.topt, a:visited.topt {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: center;
background: none;
font-family: trebuchet MS;
font-size: 11px;
font-weight: lighter;
color: transparent;
width:63px;
padding: 2px;
margin-left: 5px;
margin-right: 5px;
border: 5px dashed #ddd;
-moz-border-radius: 5px 5px 5px 5px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.7;
}
a:hover.topt {
color: #ff0000;
text-decoration: blink;
background: none;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
a.toptsel, a:visited.toptsel {
line-: 1.0em;
display: ;
float: left;
: auto;
text-align: center;
background: none;
font-family: trebuchet MS;
font-size: 8px;
font-weight: lighter;
color: #000000;
:63px;
padding: 2px;
margin-left: 5px;
margin-right: 5px;
border: 1px solid #ddd;
text-decoration: blink;
-moz-border-radius: 5px 5px 5px 5px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.7;
}
a:hover.toptsel {
color: #000000;
background: none;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 1;
}
h1#page_owner_title {
width: 350;
margin: 0 auto;
padding: 0 0 0px 50px;
background-color: none;
background: none;
color: #000;
border: none;
font-family: trebuchet MS;
font-size: 8px;
text-align: top left;
position: relative;
top: 20px;
right: 50px
bottom: 200px
left: 50px;
}
div#page_start {
width: 720px;
margin: 0 auto;
padding-left: 50px;
padding-right: 10px;
background: none;
background-color: transparent;
}
td#maincontent { padding: 0 40px 0 10px;
}
div#rail {
text-align: left;
width: 159px;
}
a.gnoptsel, a:visited.gnoptsel {
margin: -2px 0 0 0;
width: 84px;
background: url(http://images.multiply.com/multiply/nav/tselo-84.gif);
}
div#ownedfooterc {
width: 784px;
margin: 0 auto;
padding: 0;
}
div#ownedfooter {
margin: 0px;
padding: 3px 0px 3px 0px;
width: 524px;
height: 52px;
border: none;
font-size: 8px;
color: #dddddd;
background: url(http://i246.photobucket.com/albums/gg104/close2mrtj/headerMP2.jpg);
background-repeat: no-repeat;
background-position: 10% 20px;
text-align: center;
}
div#ownedfooter br {
line-height: 4em;
}
div.stats {
border-bottom: none;
}
.itemboxsub .cattitle {
font-size: 20px;
}
.itemboxsub {
color: #ff0000;
font-family:
font-weight: bold;
font-size: 24px;
border: none;
padding: 0;
margin: 0;
background: none;
background: none;
-moz-border-radius: 0px 0px 15px 15px;
max-width: 520px;
}
.rolloverfordnd {
color: #765;
font-weight: bold;
font-size: 24px;
border: none;
padding: 0;
margin: 0;
background: none;
max-: 520px;
background: url(http://images.multiply.com/multiply/style/sand/sepdnd.jpg) repeat-x bottom left;
/* display: none; */
}
.itemsubsub {
font-size: 10px;
font-weight: lighter;
font-family: verdana;
line-height: 9px;
text-align: right;
color: #ff0000;
}
.itemstamp {
float: right;
font-size: 12px;
font-weight: normal;
margin: 0;
color: #ff0000;
}
.itembox {
border-top: none;
background-color: transparent;
padding: 15px 15px 15px 15px;
margin: 0px;
overflow: visible;
width: auto;
color: #000;
-moz-border-radius: 7px 7px 7px 7px;
border: 1px solid #93A5D3;
}
.posteddate {
color: #000;
}
.itemactionspacer {
height: 30px;
}
.itemboxalbum {
border: 1px solid #ccc;
background-color: #ddd;
padding: 5px 0 10px 0;
text-align: center;
}
.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: #765;
font-size: 10px;
font-weight: normal;
text-align: center;
}
.caldiv1 th a, .caldiv1 th a:visited { color: #fff;
}
.compose img {display: none;
}
.icon { visibility: hidden;
display: none;
}
div.header {
width: 760px;
margin: 0 auto;
background: none;
}
table.globalnav {
width: 760px;
border: none;
background: none;
}
.album {
margin: 0 10px 10px 0;
color: #000;
}
.album {
border: 0px solid #765;
}
.videothumb {
float: left;
text-align: center;
font-size: 10px;
margin-top: 0pt;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 0pt;
color: #ddd;
}
table.indextitle {display: none;
}
.header .globalnav ul.gnopt a, .header .globalnav a.select { color: #ddd;
}
.litemactions a, .litemactions a:visited, .litemactions a:link { border: none;
background-color: transparent;
margin-top: 1px;
color: #765;
}
div.viewmore {
text-align: left;
margin-bottom: 20px;
}
div.itemshadow { margin-bottom: 5px;
max-width: 520px;
}
div.itemboxalbum { margin-bottom: 0;
}
.navinput {
-moz-border-radius: 4px;
border: 1px solid #765;
background-color: #000;
color: #ddd;
}
div.infobox .boxbody {
color: #000;
background-color: #670006;
background: repeat;
}
div.stats div.infobox .boxbody {
/*background-color: #93A5D3;*/
-moz-border-radius: 4px 4px 4px 4px;
}
div.infobox a, div.infobox a:link, div.infobox a:visited {
color: #FFFF00;
}
a.voptsel, a:link.voptsel, a:visited.voptsel {
background-color: #dca;
border: 1px solid #765;
color: #765;
}
a.vopt, a:link.vopt, a:visited.vopt {
color: #765;
}
div.vopt {
color: #765;
}
.voptlabel {
color: black;
font-weight: bold;
margin-right: 10px;
}
div.gndd {
background-color: #dca;
border: 1px solid #765;
}
div.ddsep { background-color: #765;
}
div.gndd a {
border: 1px solid #dca;
}
a.mine, a:link.mine, a:visited.mine {
font-size: 11px;
padding: 0 2px 0 2px;
color: #000;
}
div.ritemactions a, div.ritemactions a:link, div.ritemactions a:visited {
font-size: 11px;
padding: 0 2px 0 2px;
color: #FFFF00;
}
.replybox {
-moz-border-radius: 10px 10px 10px 10px;
border: 1px solid #93A5D3;
background: url(http://i246.photobucket.com/albums/gg104/close2mrtj/footer3MPcopy.jpg) no-repeat fixed;
background-color: #EFCF4C;
font-family: trebuchet MS;
color: #000000;
font-weight:bold;
}
textarea {
font-family: trebuchet MS;
font-size: 13px;
-moz-border-radius: 5px 5px 5px 5px;
border: 1px solid #93A5D3;
}
.quotet {
background: none;
overflow: scroll;
}
.replyboxstamp {
float: none;
text-align: left;
font-size: 12px;
font-weight: normal;
color: #000000;
margin-bottom: 5px;
}
.replybox a, .replybox a:link, .replybox a:visited {
color: #000;
}
div.openbox {
margin: 0 0 5px 0;
}
div.guidebox {
color: #000;
background: none;
background-color: #dca;
border: 1px solid #765;
}
div.add_sublabel {
color: #987;
}
div.add_sublabel a, div.add_sublabel a:link, div.add_sublabel a:visited {
color: #987;
}
div.add_sublabel a:hover {
color: #987;
}
span.signoutid a, span.signoutid a:link, span.signoutid a:visited {
color: #ddd;
}
div.header table.globalnav h3 { color: #ddd;
}
.replybox textarea {
background:black;
color:yellow;
font-size:13px;
font-weight:bold;
}
}