KETERANGAN TENTANG CSS MULTPLY
/*BACKGROUND DASAR MULTIPLY */
body {
background: url(http://dl3.glitter-graphics.net/pub/102/102239iesj3heyk3.jpg);
background-attachment: fixed;
}
/* TRANSPARENT BACKGROUND */
/* FIX PADA TEMPLATE NEWSPAPER, SANDKRIT, SKYLINE, RETRO, MYKONOS DAN DEFAULT */
body {
background : none;
background-image:url(http://dl7.glitter-graphics.net/pub/33/33197livrwu7szz.gif);
color:#000000;
}
/* TITLE */
div.owner_nav {
background:transparent none repeat scroll 0% 50%;
border:1px solid #000000;
}
/* ITEM BOX */
div#page_start {
background:transparent none repeat scroll 0%;
border:1px solid #000000;
}
.itemboxsub {
background-image:none;
border:1px solid #000000;
}
/* RIGHT RAIL */
.railsep {
background:transparent none repeat scroll 0%;
}
/* FOOTER */
div#ownedfooter {
background:transparent none no-repeat scroll left bottom;
border:1px solid #000000;
}
/* VIEWING HISTORY */
div.stats div.infobox .boxbody {
border:1px solid #000000;
}
div.infobox .boxbody {
background-color:transparent;
color:#000000;
}
div.stats .infobox {
background-color:transparent;
}
Ket:
Tip & trick bagaimana membuat site transparent dengan background, dimana script transparent ini berjalan fix pada template Newspaper, Sandskrit, Skyline, Retro, Mykonos dan Default.
Mengapa tidak fix dengan template yg lain?
Dikarenakan ada perbedaan susunan header, box dan footer. Pertama2 kita pilih template yg berjalan fix untuk script transparent ini di http://multiply.com/setup/pages/themes, setelah itu copy paste scripts dibawah ini ke http://multiply.com/setup/pages/upload-css jika iklan ads google menggangu pandangan, anda bisa tambahkan script dibawahnya menggunakan tip & trick anti iklan
/*LOGO BAGIAN YG PALING ATAS*/
div.header {
display : none;
}
div.owner_nav {
margin-top: 30px;
}
Ket:
Untuk hidden logo dan keterangan bagian atas pada header
/* BUTTON GUESTBOOK */
div#home_guestbook td#cell_submit input {
background: url(http://i261.photobucket.com/albums/ii78/ress7/1k.gif) no-repeat;
width : 80px;
height: 22px;
border :2px inset #02FF0E;
-moz-border-radius: 150px 150px 150px 150px;
color:#09FE1A;
font-weight: Bold;
font-size: 11px;
text-align: center;
}
div#home_guestbook td#cell_submit input:hover {
background: url(http://i261.photobucket.com/albums/ii78/ress7/2k.gif) no-repeat;
width : 80px;
height: 22px;
border :2px outset #02FF0E;
-moz-border-radius: 100px 100px 150px 150px;
color: #663333;
font-weight: bold;
font-size: 11px;
text-align: center;
}
Ket: script diatas tuk mengganti Button Guestbook dengan gambar atau animasi sperti gambar dibawah ini
/* BUTTON DENGAN ANIMASI */
a.topt, a:link.topt, a:visited.topt, div#subnav li.gnopt {
display: block;
background: url(http://www.geocities.com/chonk_andrew1/button/a113.gif) no-repeat;
width : 80px;
float: left;
height: 22px;
text-align: center;
font-size: 11px;
font-color : #fff;
color: #fff;
padding: 1px 1px 1px 1px;
line-height: 19px;
font-weight: bold;
border : none;
margin : 0;
}
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://www.geocities.com/chonk_andrew1/button/a116.gif) no-repeat;
width : 80px;
float: left;
height: 22px;
text-align: center;
font-size: 11px;
color: #000;
padding: 1px 1px 1px 1px;
border : none;
text-decoration: none;
line-height: 19px;
font-weight: bold;
margin : 0;
}
a.topt:hover, div#subnav li.gnopt:hover, a:hover.topt, a:link:hover.topt, a:visited:hover.topt {
display: block;
background: url(http://www.geocities.com/chonk_andrew1/button/a116.gif) no-repeat;
width : 80px;
float: left;
height: 22px;
text-align: center;
font-size: 11px;
color: #000;
padding: 1px 1px 1px 1px;
text-decoration: none;
line-height: 19px;
font-weight: bold;
border : none;
margin : 0;
}
Ket:
Script CSS diatas membuat button menu dengan animasi seperti terlihat pada gambar dan berjalan untuk semua custome a theme apa saja. Apabila didalam script kamu mengandung syntax² pada script dibawah ini, lebih baik kamu taruhlah script bagian ini paling atas sendiri, seandainya tidak berjalan seperti yg diinginkan maka kamu perlu menghapus script lamamu yg mengandung syntax tulisan sama seperti script dibawah ini supaya menghasilkan Button dgn animasi.
Macam2 button ada dibawah sendiri, button menu anda bisa merubahnya sendiri dan menyesuaikan dengan template anda hanya merubah link background pada script diatas yaitu : http://www.geocities.com/chonk_andrew1/button/a116.gif dan http://www.geocities.com/chonk_andrew1/button/a113.gif. Saya sarankan menu link background jangan disamakan semua supaya menghasilkan animasi....
MACAM ² BUTTON MENU
/* MENGHILANGKAN MENU HOME, MUSIC, BLOG dst */
PERHATIAN
Check scriptmu jangan sampai ada script seperti tulisan dibawah ini kecuali kamu ingin merubah tulisan home, blog, music, dll pada menu diatas dan mengikuti langkah2 tip dan trick dibawah ini.
Pertama kali menghilangkan menu asli bawaan multiply, copy paste scripts tersebut ke CSS MP anda
div#subnav {
display:none;
}
Setelah itu masukkan script html dibawah ini pada bagian page title yaitu click Customize My Site --> Edit --> Page Title
/*DATE PADA HOME */
span.update {
…….
……
}
Tuk menghilangkan date pada home
Bila date di home mengganggu pemandangan website anda sperti gambar diatas, ini salah satu script untuk menghilangkan date hanya pada home saja. Ubah saja scripts di atas menjadi
span.update {
display : none;
background : none;
}
/*Merubah warna font pada multiply */
h1#page_owner_title {
font-size: 40px;
color: #E2E744;
font-weight: bold;
font-family:Monotype Corsiva, Geneva;
}
a:link {color:#E2E744;}
a.topt, a:visited.topt {color:#E2E744;}
a.toptsel, a:visited.toptsel {color: #E2E744;}
a:visited {color:#E2E744;}
a.signout{color:#E2E744;}
.itembox {color:#E2E744;}
.itemboxsub {color: #E2E744;}
.album {color: #E2E744;}
a.post, a.post:visited {color:#E2E744;}
.videothumb {color:#E2E744;}
div.replybody {color:#E2E744;}
div.replyboxstamp {color:#E2E744;}
div.replyboxstamp a {color:#E2E744;}
/* BACKGROUND PADA CONTACKS LOGO USER */
.contactbox {
padding: …;
border: …….;
margin: ……;
font-size: ….;
text-align: ….;
background: url();
color: ….;
}
Script ini berfungsi memberi background pada contacks logo user teman anda, background bisa diganti dan sesuaikan dengan template anda. Ubah/ganti Scripts diatas dgn dibawah inilah tuk memberi background pada contacks user logo
.contactbox {
float: left;
padding: 12px;
border: 1px solid #8C8A8C;
margin: 8px;
font-size: 12px;
text-align: center;
background: url(http://dl2.glitter-graphics.net/pub/13/13962r68k1pzk49.gif);
color: #FFFFFF;
}
/* BERSIH DARI EMBEL2 */
.railstart {display: none;}
.railbody {display: none;}
.railsep {display: none;}
.railend {display: none;}
td.rail {display: none;}
Ket:
Tuk menghilangkan semua margin di kanan pada multiply tambahkan Script diAtas untuk menghilangkan semua margin dikanan. Dimana logo user, asal owner, iklan dan sebagainya lenyap semuanya. Script ini sangat cocok sekali bagi pengguna template default theme, oasis, blocks, skyline, mykonos dan black lily.
/* MEMBUAT BORDER MENU SENDIRI */
div#subnav {
background-image:url(http://dl3.glitter-graphics.net/pub/216/216193w56ny7w0xa.gif);
border-top:2px solid #999;
border-bottom:2px solid #999;
padding:5px 0px 3px 10px;
height:20px;
}
#subnav li.gnopt {
font-size:12px;
padding:0px;
margin:0px;
border:0px solid #999;
}
#subnav li.gnopt a:link,#subnav li.gnopt a:visited {
color:#fff !important;
background-image:url(http://dl3.glitter-graphics.net/pub/216/216193w56ny7w0xa.gif) !important;
padding:2px 5px 2px 5px;
line-height:1.0em;
border:0px solid #999;
}
#subnav li.gnoptsel {
background-color:transparent !important;
font-size:12px;
padding:0px;
margin:0px 5px 0px 10px;
border:0px solid #999 !important;
}
#subnav li.gnoptsel a,#subnav li.gnoptsel a:visited,#subnav li.gnoptsel a:link {
color:#fff !important;
background-image:url(http://dl3.glitter-graphics.net/pub/216/216193w56ny7w0xa.gif) !important;
padding:2px 5px 2px 5px;
line-height:1.0em;
border:1px solid #999;
}
#subnav li.gnopt a:hover,#subnav li.gnoptsel a:hover {
color:#999 !important;
background-color:#999 !important;
text-decoration:none !important;
}
Ket:
Script diatas tuk membuat border menu site sendiri, dimana script ini hanya cocok bagi pengguna template Default Theme, Oasis, Blocks, Skyline, Petals, Outburst dan Avlack. Background bisa diganti sesuai keinginan tinggal merubah link background image tersebut.
/* TABLE PADA VIDEO */
.videothumb {
float: left;
padding: 7px 7px 7px 7px;
text-align: center;
font-size:10px;
background: url(http://dl.glitter-graphics.net/pub/213/213871dvnm7nkx1u.gif);
border: 2px solid #ACACAC;
color: #000000;
}
Ket:
Script ini memberikan table pada video anda, sangat cocok sekali untuk mempercantik penampilan seperti gambar dan background bisa diganti dengan yg lain sesuaikan dengan template anda dengan merubah link pada scripts diatas
/* OWNER DIBAWAH LOGO */
.railbody p {
display: none;
}
Ket:
Tuk menghilangkan asal owner dan status online dibawah logo sperti gambar dibawah, tambahkanlah Script diatas.
/* TABLE ALBUM FOTO */
.album {
background: url(http://dl.glitter-graphics.net/pub/213/213871dvnm7nkx1u.gif);
float: left;
padding: 7px 7px 7px 7px;
text-align: center;
font-size: 10px;
border: 2px solid #ACACAC;
color: #000000;
}
.album:hover {
background: url(http://dl8.glitter-graphics.net/pub/137/137388pt9xs3lkoa.gif);
border: 2px solid #ACACAC;
padding: 7px 7px 7px 7px;
color: #FFFFFF;
font-size: 10px;
}
Ket:
Script diatas tuk memberikan tampilan baru dan mempercantik album foto multiply anda di site halaman depan, background bisa sesuaikan dengan template yg dipakai. Dimana terlihat gambar diatas kondisi mouse aktive akan berubah dan hanya berjalan di mozilla firefox untuk mouse aktive.
/* MERUBAH LI DEFAULT MULTIPLY */
Script ini merubah li default pada multiply, anda bisa merubahnya dengan li yg lain
li {
list-style-image: url(http://dl10.glitter-graphics.net/pub/120/120930dtf6uoajgc.gif);
}
/*Cursor default pada multiply*/
/* CURSOR */
body {
cursor:url("http://www.boomspeed.com/starlight/curreg3.cur"),default;
}
/* CURSOR LINKS */
a,a:link,a:visited,a:active,a:hover {
cursor:url("http://www.boomspeed.com/starlight/currand5.cur"),default;
}
/*IMAGE PADA CALENDER */
Scrift dibawah ini tuk menambahkan latar belakang image pada calendar,
.caldiv1 {
background-image:url(http://dl3.glitter-graphics.net/pub/14/14443i08uicfzi8.gif);
background-postion:0%;
background-repeat:repeat;
background-attachment:fixed;
}
.caldiv1 th {
background-image:url(http://dl3.glitter-graphics.net/pub/14/14443i08uicfzi8.gif);
background-postion:0%;
background-repeat:repeat;
background-attachment:fixed;
}
.caldiv1 td {
background-image:url(http://dl3.glitter-graphics.net/pub/14/14443i08uicfzi8.gif);
background-postion:0%;
background-repeat:repeat;
background-attachment:fixed;
}
/* ANIMASI FOTO atau IMAGE */
Membuat animasi image saat tersorot mouse
Script ini merupakan animasi pada foto/image saat mouse active. Kalau ingin tampilan animasi foto/image yang lain kamu hanya merubah tulisan Alpha pada script dengan tulisan lain yaitu Blur atau FlipH atau FlipV atau Gray atau Invert atau Mask atau Wave atau XRay, selamat mencoba.
a:hover img {
filter:Alpha(Opacity=50,FinishOpacity=0,Style=0);
-khtml-opacity: 0.50;
-moz-opacity: 0.50;
opacity: 0.50;
}
/*ICON PALING ATAS */
Script ini tuk menghilangkan/hidden icon paling atas
li.gnopt a img {
display: none;
}
/* IMAGE PADA MARGIN KANAN */
Script ini menambah image dimargin kanan dibawah logo tergantung template yg dipakai, sebenarnya banyak image yg bisa ditambah diatas logo maupun dibawah logo lagi, tapi ini salah satu aja. Copy paste scripts tersebut ke CSS MP anda
.railend {
display: block;
height: 150px;
width: 159px;
background: url(http://dl2.glitter-graphics.net/pub/119/119892z3a6agu7ia.gif) no-repeat center;
}
/* SEMI TRANSPARENT */
Script ini membuat semi transparent box dengan background, tambahkan script dibawah ini pada CSS MP anda
.itembox {
filter:Alpha(Opacity=55);
-moz-opacity:0.55;
-khtml-opacity: 0.55;
opacity: 0.55;
}
/* MEMBERI BACKGROUND PADA REPLY MULTIPLY */
.replyboxauthor {
background-color:#424142;
border:2px solid #424142;
}
.replyboxauthor a:link,.replyboxauthor a:visited {
color:#F50505;
}
.replyboxstamp {
color:#FF0000;
}
.replyphoto {
border:1px solid #E7E7E7;
background-color:#ffffff;
padding:5px;
}
.quotet {
background: url(http://dl3.glitter-graphics.net/pub/151/151998ii2a0z1ddx.gif);
repeat-x top left;background-color: #FFFFFF;
border-color:lightgray;
color: #5A5A5A;
border:1px solid #lightgray;
}
.replybox {
background:#E7E7E7 none repeat-x scroll -25px;
border:none;
color:#F50505;
background: url(http://dl3.glitter-graphics.net/pub/99/99471sbynohh0ss.gif);
border:1px solid #000;
}
Ket:
Script diatas tuk menambah background pada replybox biar tak terlihat kaku.
/* HIDE ICON MENU PADA HOME */
.icon { visibility: hidden; display: none; }
Ket:
Tuk menghilangkan icon2 pada tampilan Home multiply
Post
/* HIDE ICON ADD & SELECT */
a.select, a:link.select, a:visited.select {
background: none;
}
div.select {
background: none;
}
a.add, a:link.add, a:visited.add {
background: none;
}
Untuk selanjutnya terserah anda.
Silahkan pelajari dan edit sesuka anda, pelajarilah pelan2.. meski sedikit yg penting memahami.
Bila ada kesalahan.. mohon diperjelas.
Semoga bermanfaat
dan pilih Theme Whiteout. Klo masih bingung, klik ja tulisan ini http://choose themes
dan edit CSSnya. or klik tulisan nhi.. http://custom CSS
dan copy paste semua code dibawah inipada kolom page title sperti contoh pada gambar dibawah ini
