Tutorial : Navigation 01

Assalammualaikum and Annyeonghaseyo

HOME

AUTHOR 

STUFF

EX-LINK

EX-BANNER

nak belajar tak macam mana nak buat navigation macam dekat atas? okay jom mula.

1. Dashboard > Layout > Add HTML

2. Copy code dibawah

<style>
a.navi {
display:inline-block;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
padding:2px;
width:210px;
text-decoration:none;
font-family:calibri;
font-size:13px;
height:20px;
text-transform:uppercase;
color: #444;
background: #FED4EB;
text-align:center;
border: 1px #ffffff solid;
}
a.navi:hover {
color: #fff;
background:url(URL GAMBAR);
background-position:50% 80%;
background-size:400px;
</style>
<a class="navi" href="LINK">HOME</a>
<a class="navi" href="LINK">AUTHOR</a>
<a class="navi" href="LINK">STUFF</a>
<a class="navi" href="LINK">EX-LINK</a>

3. Paste di HTML
4. Save!!

Petunjuk

Merah - Warna ikut citarasa korang
Oren - kelebaran, ketinggian dan saiz font
Biru - Link dan url gambar/background korang
Hijau - Nama atau tajuk 

Credit : AtinTory