[Tutorial] Cara buat Menu Tab Mudah Versi Saya.

Assaalamualaikum..

Tutorial ini di request oleh cik manis Izzah. Maaf lambat buat tutor..hehe..

Izzah minta tuto cara nak buat menutab view macam di blog saya ini.

Kalau kita sentuh atau click/hover  menu tab ini akan jadi macam ini:

Warna merah kan.

Baiklah ini tutonya :

1. Dashboard > Template > Edit Html
2. Cari kod ini (CTRL + F di keyboard untuk memudahkan pencarian) :

]]></b:skin>

   3. Kemudian copy pula kod di bawah ini :

a.menutab {
background:url(URL BACKGROUND IMAGE);
display: inline-block;
font: normal 10px 'Lucida Sans Unicode', Lucida Grande, sans-serif;
color: #000;
border: 2px solid #eee;
display: inline-block;
letter-spacing: 1px;
margin: 0 2px 0 0;
padding: 4px 9px;
text-transform: uppercase;
}
a.menutab:hover {
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
border: 2px solid #ccc;
background:#e23767;
color:#fff;
}

# warna ini - untuk tukar warna hover menutab. HTML COLOR CODE di sini.

   4. Paste kod tersebut di atas atau sebelum kod   ]]></b:skin>

   5. Tekan preview, dan kalau tak ada error boleh save.

   6. Kemudian pergi Layout > Add gadget >  HTML/Javascript

   7. Copy code di bawah ini dan pastekan di dalam HTML/Javascript 

<center>
<a class="menutab" href="URL LINK">NAMA TAB</a>
<a class="menutab" href="URL LINK">NAMA TAB</a>
<a class="menutab" href="URL LINK">NAMA TAB</a>
<a class="menutab" href="URL LINK">NAMA TAB</a>
<a class="menutab" href="URL LINK">NAMA TAB</a>
</center>

  8.  Kalau nak tambah menutab cuma copy dan paste kod ini

 <a class="menutab" href="URL LINK">NAMA TAB</a>  

di bawah kod di atas sebelum kod </center>

URL LINK - Url Link ini gantikan dengan link yang anda nak contoh : http://facebook.com

NAMA TAB - Nama tab itu pula anda gantikan dengan nama yang anda nak dia appear dekat menutab contoh : Facebook

Nak buat pages menutab ini boleh pergi dekat Dashboard > Pages. Kemudian copy link pages dan paste dekat URL LINK itu ye.

9. Dah selesai semua bolehlah save. Kemudian cuba tengok, kalau jadi  alhamdulillah, dah berjaya.

Cubalah ye, kalau tak jadi atau ada apa-apa masalah beritahu saya. 

p/s : Jom kita ke blog Izzah..tambah kenalan di dunia blog ini.