Tutorial : Cara Membuat Menu Tab - MaisarahSidi.com

KLIK> Daftar Percuma Narratrs - Jana Income USD Menerusi Instagram

24 March 2012

Tutorial : Cara Membuat Menu Tab

24/3/2012


Assalamualaikum dan selamat sejahtera.

Ok la, kali ni saye nak wat tutorial cara membuat menu tab yang comel, contohnye macam menutab blog ni yang ade kat bawah header tu. Tutorial ni telah pun diminta oleh sorang blogger. Tanpa banyak menaip yang lebih merepek, jom kite mulakan tutorial kali ni.


Step 1

Mula2, design menu tab yang korang nak gune photoshop, paint atau ape saje yang seangkatan dengannye. Apabila da siap men'design', jangan lupe tulis ape yang tajuk menutab tu yek.

Saya ada sediakan beberapa contoh menutab yang saya design sendiri. Tab yang simple. Kalau nak guna, korang boleh copy pastu tulis la tajuk menutab tu, contohnya 'home' dengan menggunakan photoshop, paint dan lain2 lagi. Tu pun kalau nak guna. ehehe.







Step 2

Buka Dashboard > Design > Page Elament > Add Gadget > HTML/Java Script
Copy kan code dibawah ni, dan letak dalam HTML/Java Script


<a href= " URL Pages anda " target = " _blank"><img src=" URL Pic Tab Menu " width="155" height = "80" /></a>

* Nak cari URL Pages? 
   Pergi ke Dashboard > New Post > Edit pages (selang 2 dari new post). Tengok gambar bawah ni, klik yang biru tu.



Pastu akan keluar camni


right click kat yg petak biru tu (ikut arrow) untuk dapatkan URL pages (klik copy link address). Pastu paste URL tu pada kod tadi.



Penting!

  • Rujuk sini untuk buat pages/menutab.
  • Kalau nak letak 3 tab, copy je code kdalam step 2 sebanyak tiga kali dan ubah URL Pages anda dan URL Tab Menu. 
  • Saiz tab menu boleh diubah mengikut kesesuaian. Hanya adjust 'width' dan 'height' . 
  • Sila letak code <center> dihadapan code korang yang first, dan letak </center> di code yang paling akhir untuk memastikan tab menu berada ditengah-tengah. Contoh:
 <center><a href= " URL Pages anda " target = " _blank"><img src=" URL Pic Tab Menu " width="155" height = "80" /></a> </center>


Selamat mencuba ^_^
Kalau ada sebarang masalah, tanya je ye.

3 comments:

  1. Assalamualaikum . .kak nak tnya . .mcam mna nak t ikutyg kta gna kan tu . .mcm contoh . saya nak post dlam Home. . tp bla post. .tak mau pun . . nak wt ye ? post ikututab

    ReplyDelete
  2. @PuteraPuteri_SmkSAS

    wslm...maksudnye cmne ye?..x boleh link ke?..

    klu home, mmg xleh post kt page home tu..utk yg lain boleh :)

    ReplyDelete
  3. follow me! :) http://thebobots.blogspot.my/

    ReplyDelete

Terima kasih atas komen anda