Tutorial : Simple Menu Tab Hover

Monday, August 13, 2012

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 ^^ .


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/

3 comments:

  1. kenapa dah tak jumpa ek code

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

    ni?

    ReplyDelete
    Replies
    1. paste kan atas code

      .content-inner{

      pon boleh.

      Delete

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED