Tutorial : Floating Navigation 2

Wednesday, June 12, 2013

Assalamualaikum & Salam Sejahtera
Hai , hari ni nak share tutorial Floating Navigation Versi 2 . Kalau nak tengok yang versi 1 macam mana , boleh klik dekat sini . This second version macam pelik sikit kot , sebab dah kehabisan idea . Taktau nak buat macam mana . Meh tengok screencap sikit .




Macam mana nak pakai ?

Template Designer : Dashboard > Layout > Add a Gadget > HTML & JavaScript

Classic Template : Dashboard > Edit HTML > Paste dekat mana mana yang korang suka .


<style>
a:link, a:visited {
text-decoration:none;
color:white;
}
.go {
display:inline-block;
background:black;
color:white;
width:10px;
height:250px;
text-align:center;
font:8px tt;
text-transform:uppercase;
padding:5px 5px 5px 5px;
border-radius:4px;
box-shadow:2px 2px 2px #000;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.go:hover {
height:100px;
padding:220px 5px 5px 5px;
}
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
@font-face{
font-family:bb;
src:url('http://static.tumblr.com/q29fumh/Of1mmbed0/blackout-midnight_2.ttf')
}
</style>
<br />
<div style="background: #000; color: white; display: inline-block; font: 15pt bb; height: 25px; left: 10px; letter-spacing: 9px; padding: 5px 5px 0px 10px; position: fixed; text-align: center; top: 0px; width: 210px; z-index: 999;">
NAVIGATION
</div>
<div style="left: 34px; position: fixed; top: -150px;">
<div class="go">
<a href="LINK HERE">H<br />o<br />m<br />e</a> </div>
</div>
<div style="left: 64px; position: fixed; top: -120px;">
<div class="go">
<a href="LINK HERE">T<br />u<br />t<br />o<br />r<br />i<br />a<br />l</a></div>
</div>
<div style="left: 94px; position: fixed; top: -140px;">
<div class="go">
<a href="LINK HERE">A<br />f<br />f<br />i<br />e<br />s</a></div>
</div>
<div style="left: 124px; position: fixed; top: -160px;">
<div class="go">
<a href="LINK HERE">o<br />t<br />h<br />e<br />r<br />s</a></div>
</div>
<div style="left: 154px; position: fixed; top: -110px;">
<div class="go">
<a href="LINK HERE">T<br />w<br />i<br />t<br />t<br />e<br />r</a></div>
</div>
<div style="left: 184px; position: fixed; top: -130px;">
<div class="go">
<a href="LINK HERE">T<br />u<br />m<br />b<br />l<br />r</a> </div>
</div>

Mana mana code yang korang rasa nak ubah , sila ubah . Nak guna bagitau . Credit ? Terpulang :D kbai o/

1 comment:

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED