Tutorial : Sliding Hover Cbox Version Mine


Assalamualaikum . 

Tiba-tiba mood ni rajin pulak nak buat tutorial . Entah kenapa pun tak tahu . Mungkin mood tahun baru kot ? Hihihikk . Suka tak ? Suka tak ? ;p Tutorial ini agak susah sedikit dan memeningkan kepala . Korang kena pandai bermain dengan anak kod yang comel-comel ni eh ^_^

 Copy semua kod dibawah ini dan paste kan dekat 

Template Designer :
Dashboard >  Layout > Add a Gadget> Edit Html

#frase2{
bottom:0px;
background-image:url('URL BACKGROUND');
background-color:#FFD1D6 ;
border: 1px solid #FFC7D8;
width:200px; height:15px; position: fixed;
-webkit-transition: all 0.4s ease-out;
 -moz-transition: all 0.4s ease-out;
font-family: verdana; color :#9C9C9C;
font-size: 15px; z-index: 2;
cursor:hand;text-align: center;
 padding:3px;right:100px;
}

#frase2:hover {
background-color: ;
height: 280px;
color: transparent;
opacity:1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
cursor:hand;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
 }

.frase1 {
text-align: center;
position: fixed;
color: transparent;
width: 78px; opacity:0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=0);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
 cursor:hand;
}

.frase1:hover {
color:#888;
height:30px;
opacity:1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
-webkit-transition: all 0.4s ease-out;
 -moz-transition: all 0.4s ease-out;
cursor:hand;
}

.chat{
line-height: 12px;
list-style: none
}

 Then copy ni pulak & paste kan selepas kod diatas


<div id="frase2"><div class="frase1"><p>"CODE CBOX"</p></div>KOTAK JERIT</div>


Done ? SAVE !^^

Information

Merah - Background *cari di google
Biru - Warna Background ( Sini )
Hijau - Warna Tulisan ( Sini )
Kuning - Masukkan kod cbox korang
Purple - Ayat/Tajuk
Nota Kaki : Tolong credit kepada Zurah ye kalau guna ^^

3 comments:

deno said...

pandai die buat tutor... nice entry :)

Cikgu Ma said...

rajin buat tuto...

Shazreena Shukri said...

jom join giveaway ni..hadiah gempak :)

http://shazreena-reena.blogspot.com/2013/01/new-year-giveaway-by-shazreena-shukri.html