Tuesday, March 5, 2013

Tutorial : Status Box Hover

Tumblr_mj55rx5c6z1rl029do1_500_large

こんにちは, 안녕하세요 ,
 Assalamualaikum. Sebenarnya req ni dah lama dah.. dari kak sheda . Dia kata die pernah tengok atin pakai status box yang hover ke tepi tu huhu .. Tapi atin tak sempat nak buat . bukan apa tak teringat huhu.. So hari atin bagi tuto.. Tapi jangan lupa yang ni bukan code atin tapi code dari fiqah tau



  • Blogskin : Paste bawah code </style>
  • Template design : paste dalam add gadget
merah : URL background
oren : status korang




<style>
.y{
border-radius: 0px 15px 15px 0px;
width:10px;
padding:10px;
height:25px;
margin-top:30px;
margin-left:255px;
background: #faafbe;
color:white;
font-size:12px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#kotakstatus {
position:fixed;
border:4px solid #faafbe;
width:250px;
left:-265px;
top:50px;
height:100px;
padding:4px;
text-align:left;
font-size:11px;
font-family:arial;
background-color:white;
background-image:url(URL BACKGROUND);
background-position:right;
color:#333333;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#kotakstatus:hover {
left:1px;
}
</style>

<div id="kotakstatus"><div class="y">
s</div>
<div style="margin-top: -80px;"><br>
PUT STATUS HERE</div></div>

4 comments:

Inspirit's Baby said...

Hai~ TQ for the tutor. Memang dh lame cari tutor ni~ ^^

Atin Tory said...

@Inspirit's Baby : ur welcome :)

Sheda ucu said...

thanks cyggg huhu

Atin Tory said...

@Sheda ucu : ur welcome : )