Tutorial : Simple Menu Tab Hover

Assalamualaikum & Salam Sejahtera

Yoo , ari ni update dengan tutor . tutor yang simple lagi mimple . haha . ape die menu tab ? meh jenguk entry NI . okay sekarang dah paham kan ape itu menu tab . so korang cube lah baru tau macam mana ^^ .

LIVE PREVIEW

1. Dashboard > Design > Edit HTML . pastu CTRL + F this code :

/* Header
----------------------------------------------- */

2. lepas tuh copy code bawah ni . PASTE dekat ATAS code yang korang carik tadi .

a.menu {
display:inline-block;
text-align:center;
width: 55px;
color: #ffffff;
background:#969696;
padding:4px;
margin:2px;
-webkit-transition-duration:.3s;
}
a.menu:hover {
display:inline-block;
text-align:center;
width: 55px;
color: #000000;
background:#cac9c9;
padding:4px;
margin:2px;
-webkit-transition-duration:.3s;
}
a.manu {
display:inline-block;
text-align:center;
width: 55px;
color: #ffffff;
background:# cac9c9 ;
padding:4px;
margin:2px;
-webkit-transition-duration:.3s;
}
a.manu:hover {
display:inline-block;
text-align:center;
width: 55px;
color: #000000;
background:#cac9c9;
padding:4px;
margin:2px;
-webkit-transition-duration:.3s;
}

p/s : code untuk width , color , background , padding and margin tuh korang boleh ubah mengikut kesukaan korang okay !

now pergi pulak dekat Dashboard > Design > Page Elements . okay . klik Add a Gadget > HTML/JavaScript . copy code bawah ni . paste dekat dalam gadget HTML/JavaScript :

<center><a class="menu" href="LINK HERE">TITLE</a> .  <a class="manu" href="LINK HERE">TITLE</a>   .  <a class="menu" href="LINK HERE">TITLE</a>  .  <a class="manu" href="LINK HERE">TITLE</a>

Paste kan link korang dengan title untuk link korang and SAVE . siap . mudah kan ? so apa tunggu lagi . jom lah cuba . kalau tak menjadi , bagitau . mungkin ade code yang tak berapa nak betul , aku betul kan . okay ? kbai o/