Friday, November 30, 2012

Tutorial : Navigate Terapung Style 1

Tumblr_mdgcytxl5a1r2r1gko1_500_large
Tadi ade orang reQ  pasal navigate yg atin taruk .. Tapi sebabkan die reQ atin terpaksa buat . Sebab klo ikutkan sebenarnya tu dari wana punya.. 


  • Kalau guna classic template, paste dekat bawah </style>
  • Template designer can simply paste this codes into HTML/GADGET 

<style>
.raejun{
width:96px;
padding:2px;
margin-top:5px;
box-shadow:2px 2px 4px #DFDFDF;
background:#eee;
font:8px tt;
text-align:center;
Text-decoration:none;
color:#FF8888;
text-transform:uppercase;
display:block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-left:0px solid #FF8888;
}
.raejun:hover{
width:66px;
border-left:30px solid #FFBBBB;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<div style="background:#eee;color:#fff; position:fixed; top:0px;left:35px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="background:#eee;color:#fff; position:fixed; top:0px;left:90px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="position:fixed; top:100px;left:20px;width:100px; color:#aaa;">
<div style="background:#FFBBBB;color:#fff;width:100px; box-shadow:2px 2px 4px #bbb;text-align:center; font-size:12px; text-transform:uppercase;">
Navi</div>
<img src="http://i.imgur.com/jninm.png" style="width:80px;border:10px solid #eee;margin-top:5px;box-shadow:2px 2px 4px #ddd;" >
<a class="raejun" href="LINK HERE">link 1</a>
<a class="raejun" href="LINK HERE">link 2</a>
<a class="raejun" href="LINK HERE">link 3</a>
<a class="raejun" href="LINK HERE">link 4</a>
</div>




Credit by : wana



10 comments:

Mrs. Sarah said...

Thanks... hehe maaf kalau menyusahkan kak Atin buat tuto *buat aegyo* :3

Atin Tory said...

@Mrs. Sarah : its ok :)

Sheda ucu said...

nk wat jugak tq atin cyg hihihi im your no1 fan..hihihi

Atin Tory said...

@Sheda ucu : hihi..aigoo -.- *malu jab >< XD

Grace Gositin said...

woahh ! dah lama mencari . akhirnya jumpa juga tutorial nie . thx kak :)

Atin Tory said...

@Grace Gositin : ur welcome

Syada Nazurah said...

saya guna yang ini ya.. terima kasih sebab buat tuto nie..

Aenn Athirah said...

aenn guna yer..

HAJAR said...

thanks..:)

ck mawaddah said...

tq ye atin, sy dah lama cari tuto nih :)