Tutorial : Navigation With Hover #5

Assalamualaikum & Salam Sejahtera
Okay lama dah tak dapat request tutorial . then someone dah request dekat aku punya ASK.FM . kebetulan tengah buka ask.fm. so aku terus buat tutor yang dia request . tapi ape yang dia request ?

Okay maksud dia mungkin Navigation yang aku pakai sekarang ni , yang macam korang tengah tengok dekat sidebar tu . tak pun tengok bawah ni ;

BETTER PREVIEW

Ha macam tu yang dia request . okay apa tunggu lagi . jom mula :D

Template Designer > Layout > Add a Gadget > HTML / JavaScript 

<style>
@font-face{
font-family:franchise;
src:url('http://static.tumblr.com/q29fumh/dcSmlhwc5/franchise-bold-hinted.ttf')
}
@font-face{
font-family:bebas;
src:url('http://static.tumblr.com/q29fumh/i3xmldrl4/bebasneue.otf')
}
.nav {
font-family:franchise;
font-size:18px;
text-align:left;
color:#666;
letter-spacing:2px;
text-decoration:none;
margin:1px;
padding-left:5px;
border-left:0px solid #232323;
text-tansform:lowercase;
webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.nav:hover {
font-family:franchise;
font-size:18px;
text-align:left;
color:#666;
letter-spacing:2px;
text-decoration:none;
margin:1px;
text-tansform:lowercase;
padding-left:5px;
border-left:20px solid #232323;
}
</style>

<div style="font:18px bebas;text-transform:uppercase;">
a) <a class="nav" href="URL">TITLE</a><br />
b) <a class="nav" href="URL">TITLE</a><br />
c) <a class="nav" href="URL">TITLE</a><br />
d) <a class="nav" href="URL">TITLE</a><br />
</div>

Save .


Classic Template > Template > Edit HTML > Paste atas </style>

@font-face{
font-family:franchise;
src:url('http://static.tumblr.com/q29fumh/dcSmlhwc5/franchise-bold-hinted.ttf')
}
@font-face{
font-family:bebas;
src:url('http://static.tumblr.com/q29fumh/i3xmldrl4/bebasneue.otf')
}
.nav {
font-family:franchise;
font-size:18px;
text-align:left;
color:#666;
letter-spacing:2px;
text-decoration:none;
margin:1px;
padding-left:5px;
border-left:0px solid #232323;
text-tansform:lowercase;
webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.nav:hover {
font-family:franchise;
font-size:18px;
text-align:left;
color:#666;
letter-spacing:2px;
text-decoration:none;
margin:1px;
text-tansform:lowercase;
padding-left:5px;
border-left:20px solid #232323;
}

Kemudian Paste code bawah ni dekat bahagian yang sepatutnya .

<div style="font:18px bebas;text-transform:uppercase;">
a) <a class="nav" href="URL">TITLE</a><br />
b) <a class="nav" href="URL">TITLE</a><br />
c) <a class="nav" href="URL">TITLE</a><br />
d) <a class="nav" href="URL">TITLE</a><br />
</div>

Save .

Siap . macam biasa mana mana yang boleh di ubah macam code warna , title , url and etc , ubah lah . ubah mengikut citarasa korang . kalau tak paham atau tak jadi , sila tanya . oh ya , before nak amek tu wajib komen and bagitau ye . credit ? terpulang . kbai o/