Hover Box

Assalamualaikum and Hai there reader(s)

Tuto ini untuk pengetahun korang sahaja. Kalau ingat , sebelum ini Ira penah guna untuk chatbox. Jom lah try sama-sama (:

1. Layout > Add Gadget > Html/Javascripts

2. Pastekan code ini dalam kotak tadi. Jangan tekan Rich text ! Takut tak jadi

<style>

.tito {

border-radius: 0px 15px 15px 0px;

width:10px;

padding:10px;

color:#fff;

height:120px;

margin-top:60px;

margin-left:255px;

background: #45ADA8;

-webkit-transition: 1.0s;

-moz-transition: 1.0s;}

#note {

position:fixed;

border:1px dashed #aaa;

width:250px;

left:-265px;

top:200px;

height:250px;

padding:4px;

text-align:left;

background:#fff;

color:#444;

-webkit-transition: 1.0s;

-moz-transition: 1.0s;}

#note:hover {

left:1px;}

</style>

<center><div id="note"><div class="tito">

c<br />h<br />a<br />t<br />b<br />o<br />x</div>

<div style="margin-top: -180px;">

code kotak shoutbox or anything :)</div></div></center>

3. Save :)