Tutorial : Hide Chatbox with Hover (Blogskin)

Assalamualaikum and annyeonghaseyo. Tutor hari ni rienna nak ajar korang cara untuk buat hide chatbox. Act, tak tahu apa nama tutor ni -_- Kalau nak tahu apa yang rienna 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 : Tieqa