Assalamualaikum.

Today aku nak share tutorial Hide cbox with hover macam aku punya. Memandangkan dah beberapa orang request tuto ni dekat aku, aku pun dengan baik hatinya share la tuto ni for u all :) btw jgn lupa credit tau ! xD



Classic Template

1. Dashboard > Template
2. Press Ctrl+f , then search code </style>
3. Copy code di bawah

<style>
#frase1{
bottom:0px;
background-color: #FFF ;
border: 1px solid #eee;
border-bottom: 8px solid #DEEEEB;
border-top: 8px solid #f6f6f6;
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: 10px; z-index: 2;
cursor:hand;text-align: center;
 padding:3px;left:35px;
}
#frase1: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;
 }
.frase2 {
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;
}
.frase2: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;
}
</style>
<div id="frase1"><div class="frase2"><p>CboxCode</p></div>Ayat</div>

4. Paste di bawah code </style>
5. Preview & save .

                                                                                                                                             

Simple Template

1. Dashboard > Layout > Add a Gadget > HTML/Javascript
2. Copy code di bawah

<style>
#frase1{
bottom:0px;
background-color:#FFF ;
border: 1px solid #eee;
border-bottom: 8px solid #DEEEEB;
border-top: 8px solid #f6f6f6;
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: 10px; z-index: 2;
cursor:hand;text-align: center;
 padding:3px;left:35px;
}
#frase1: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;
 }
.frase2 {
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;
}
.frase2: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;
}
</style>

<div id="frase1"><div class="frase2"><p>CboxCode</p></div>Ayat</div>

3. Paste di dalam HTML/Javascript
4. Save .


Note !
Merah : Warna Background
Ungu : ketebalan border
Oren : solid/ dotted/ dashed
Biru soft : warna border
Biru pekat : tinggi box
Hijau pekat : Lebar box
Kelabu peka : warna font
Kelabu : warna border bawah & atas
Merah light : Code Cbox
Biru : Ayat