Tutorial : Hide Chatbox With Hover
Written by : hamizashuhada on Wednesday, 28 November 2012 | 21:26 | 0 comments
Hari ni buat tutorial macam mana nak sorok chatbox macam Miezza punya.

1. Dashboard  > Template
2. Cari code  </style>  . Guna ctrl+F pun boleh.
3. Copy code ni :
    #frase2{
bottom:0px;
background-image:url('URLBG');
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: 9px; 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
Paste code diatas </style>

Biru : url background
Merah : warna background
Pink : ketebalan border
Mustard : Dotted / Solid / dashed
Kuning : warna border
Hijau tua : Tinggi kotak
Hijau apple : Lebar kotak
Ungu : warna font

Then,copy code ni :

</style><div id="frase2"><div class="frase1"><p>"code cbox"</p></div>ayat anda</div>
Ungu :  code cbox
Hijau : Ayat anda . Contoh : tagboard , cbox dll .

Paste dibawah code </style>
Preview and save kalau dah jadi.

                                                                                                                    credit to : atiqah

Post a Comment