Tutorial : Navigation With Hover #9

Assalamualaikum & Salam Sejahtera

Selamat malam . Malam ni nak bagi navigation with hover versi ke-9 . Feel free kalau nak guna . Cuma , before guna , wajib komen terlebih dahulu . Kredit ? Terpulang . Mana mana code yang di-bold-kan boleh ubah ikut citarasa korang tersendiri . Live preview bawah ni . TQ 

LIVE PREVIEW

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

Classic Template > Template

<style>
@font-face {
font-family:"bebas";
src: url('http://static.tumblr.com/q29fumh/UiBmzjw3n/oldsansblack.ttf');
}
.navig a{
font:15pt bebas;
text-decoration:none;
margin:0px 2px 0px 2px;
text-align:center;
text-transform:uppercase;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.navig a:hover{
color:white!important;
}
</style>
<br />
<div class="navig" style="text-align: center;">
<a href="LINK" style="border-bottom: 4px solid #fe9797; color: #fe9797;">Tutorial</a>
<a href="LINK" style="border-bottom: 4px solid #fe97d9; color: #fe97d9;">Affiliates</a>
<a href="LINK" style="border-bottom: 4px solid #e797fe; color: #e797fe;">Twitter</a>
<a href="LINK" style="border-bottom: 4px solid #9a97fe; color: #9a97fe;">Tumblr</a>
<a href="LINK" style="border-bottom: 4px solid #97feb4; color: #97feb4;">Instagram</a>
<a href="LINK" style="border-bottom: 4px solid #f6fe97; color: #f6fe97;">Refresh</a>
</div>

Preview kemudian Save.

Adios.