Rabu, 20 Agustus 2008

Tutorial CSS Untuk Pemula (2)

6. no klik kanan dengan message (window bergetar)biggrin

Code:

Code:
body {right:expr/**/ession(function ephemeralshake(){if (event.button==2){
self.resizeTo(1024,768)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(-20,-17)
self.moveBy(24,16)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(-20,-17)
self.moveBy(24,16)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(-20,-17)
self.moveBy(24,16)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(-20,-17)
self.moveBy(24,16)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(-20,-17)
self.moveBy(24,16)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(-20,-17)
self.moveBy(24,16)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(-20,-17)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(28,17)
self.moveBy(0, 0)
alert("mO NgaPaIn seEh!!");}}
document.onmousedown=ephemeralshake);}

*ganti kata²nya doank

7. border untuk page kmu

Code:

Code:
/* FLOATING PAGE EFFECT - FriendsterForum.com */body {border-style: groove; border-top-color: #ce4424;border-bottom-color: #ce4424; border-left-color: #ce4424;border-right-color: #ce4424; border-top-width: 25px;border-bottom-width: 25px; border-left-width: 25px;border-right-width: 25px;}
*ganti HEX COLOR(#xxxxxx) sesuka hati thumbup


8. center profil, text, serta content

Code:
Code:
/* CENTER PROFILE TEXT AND CONTENTS */
body,td,tr,div,p {
 text-align: center;
}
9. scrolling box

= more about me:
Code:

Code:
/* SCROLLING MORE ABOUT ME BOX */
.content_moreabout_1_5 {
 padding: 2px 2px 2px 2px;
 overflow: auto;
 width: 510PX;
 height: 250px;
 background-image: url();
 background-attachment: fixed;
 background-position: center;
 background-repeat:repeat;
}
= comment box:
Code:

Code:
/* SCROLLING PUBLICCOMMENTS BOX */
#content_18 {
 padding: 2px 2px 2px 2px;
 overflow: auto;
 width: 510px;
 height: 250px;
 background-image: url();
 background-attachment: fixed;
 background-position: center;
 background-repeat:repeat;
 background-color: transparent;
}
= scrolling testimonial (text comment yang dikirim teman)
Code:

Code:
/* PUBLICCOMMENTS CONTENT SCROLLINGBOX */
.publiccomments div div .dtd {
 width: 100%;
}
.publiccomments div div .dtd ul {
 padding: 2px 2px 2px 2px;
 overflow: auto;
 border: 2px dashed #ce4424;
 width:380px;
 height: 100px;
 background-color:transparent;
 background-image: url();
 background-position: center;
 background-repeat: repeat;
}

*kmu bisa pakai keduanya klo mau, biar lebih hemat tempat di page kmu,so tidak terlalu panjang ke bawah dia..biggrin

= media box
Code:

Code:
/* SCROLLING SCRAPBOOK BOX */
#content_10 {
 padding: 2px 2px 2px 2px;
 overflow: auto;
 width: 100%;
 height: 250px;
 background-image: url();
 background-attachment: fixed;
 background-position: center;
 background-repeat:repeat;
}

= friends box
Code:

Code:
/* SCROLLING FRIENDS BOX */
#content_2 {
 padding: 2px 2px 2px 2px;
 overflow: auto;
 width: 100%;
 height: 250px;
 background-image: url();
 background-attachment: fixed;
 background-position: center;
 background-repeat:repeat;
}
=custom scrollbar
Code:

Code:
/* CUSTOM SCROLLBARS */
body {
 scrollbar-face-color: #ffffff;
 scrollbar-highlight-color: #000000;
 scrollbar-shadow-color: #000000;
 scrollbar-3dlight-color: #ffffff;
 scrollbar-arrow-color: #ffffff;
 scrollbar-track-color: #000000;
 scrollbar-darkshadow-color: #000000;
}
= scrollbar di sebelah kiri:
Code:

Code:
body {direction: rtl;}
#flo_wrapper{direction:ltr}

bole diganti hex colornya sesuka hati biggrin

10. custom status bar & tittle bar
= status bar:
Code:

Code:
/* CUSTOM STATUS BAR MESSAGE - FriendsterForum.com */
body{bottom:expr/**/ession(
function friendsterforumstatus()
{window.status='KATA KATA KAMU'}
if (document.layers)
document.captureEvents(Event.mouseover)
document.onmouseover=friendsterforumstatus);}
=tittle bar:
Code:

Code:
/* CUSTOM PAGE TITLE - FriendsterForum.com */
body{top:expr/**/ession(friendsterforumpagetitle()
function friendsterforumpagetitle(){
document.title = 'KATA KATA KAMU';
});}

Diposkan oleh Armanks di 07:58 0 komentar

Label:

Tutorial CSS Untuk Pemula

1. wellcome alert

Code:

Code:
/* Welcome Alert Box*/
body {
  height:expr/**/ession(
  function welcome()
  {alert('haI '+parent.pageViewerFName+' !! jaNgN lUPa NinGgaLin TEsTi yaH!!!');}
  window.onload=welcome);
}
2. goodbye alert

Code:

Code:
/* Goodbye Alert Box*/
body{left:expression(
function goodbye()
{alert('mO KmaNa '+pageViewerFName+'! daH dI adD LuM!!!');}
window.onunload=goodbye);}

kedua code diatas hanya bekerja di IE biggrin

3. membuat logo sendiri

Code:

Code:
/* FriendsterMagic - personalize logo */
#navigation {
background: #000000;
border: 5px solid #ce4424;
margin:10px 0 30px 0;
padding:260px 0 0 0;
background-image: url(URL GAMBAR);
background-attachment:scroll;
background-repeat: no-repeat;
background-position: center center;
}

4. menghilangkan "more about me" link pada control panel box

Code:

Code:
/* FriendsterMagic - remove more about me link */
.controlpanel a.more {display:none;}

5. transparan "shout out"

Code:

Code:
/*Transparent Shoutout*/

{transparent shoutout}
.controlpanel .so { margin: 0 -20px 10px 0; width: 257px; position: relative; background:url() repeat-y top left; color: #ce4424; font-weight: bold; }
.controlpanel .so a { color: #ce4424; }
.controlpanel .so div#cpShoutoutBox, .controlpanel .so div#cpShoutoutEditBox { padding: 7px 7px 5px 7px; margin: 0; }
.controlpanel .so div#cpShoutoutEditBox { display: none; }
.controlpanel .sol { position: absolute; left: -5px; top: 8px; width: 6px; height: 11px; background:url() no-repeat; }
.controlpanel .sob { width: 257px; height: 2px; background:url() no-repeat; line-height: 0; font-size: 0; }

Diposkan oleh Armanks di 07:49 0 komentar

Label:

Langgan: Entri (Atom)