Tutorial : Hide Chatbox with Hover (Blogskin)


Assalamualaikum and annyeonghaseyo. Tutor hari ni tieqa nak ajar korang cara untuk buat hide chatbox. Act, tak tahu apa nama tutor ni -_- Kalau nak tahu apa yang tieqa duk bebelkan ni. Bole tengok contoh dekat bawah ni.


Preview


1. Dashboard > Template
2. Press Ctrl + f serentak dan cari code </style>
3. Copy code dekat bawah 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
}

4. Paste di atas code </style>

Hijau : URL background
Merah : URL background
Ungu : ketebalan border
Oren : solid/ dotted/ dashed
Biru : warna border
Biru pekat : tinggi box
Hijau pekat : Lebar box
Kelabu : warna font

5. Sekarang. copy code ni pula
<div id="frase2"><div class="frase1"><p>"CODECBOX"</p></div>AYAT</div>
6. Paste di bawah code </style>
7. Preview & save.

Merah : code chatbox
Pink : Ayat
Credit : http://tny.cz/

6 comment [s]:

Anim Farhanim said...

eh boleh tak kalau buat belah kiri ? macam mana ek ?

Nurul AtiQah said...

@Anim Farhanim : Boleh..cari code ni padding:3px;right:100px; (ubah "right" kpd "left")

Aida Lyna said...

Ada tagboard ?

Nurul AtiQah said...

@Aida Lyna : Ni mmg utk tagboard

nurhamiza shuhada said...

thanks :) menjadi !

nurhamiza shuhada said...

Boleh tak saya nak letak tuto ni kat blog saya ? nanti saya credit ?