Header Ads

Cara Buat Menu Tab dan Nav Bar

Pages atau halaman pada blog merupakan salah satu widget yang bagus dan praktikal. Dengan adanya pages kita dapat mengkategorikan pelbagai tajuk utama dan kecil dengan lebih tersusun. Selain dari tu ia dapat membuatkan semua pengunjung berasa selesa untuk membaca mengikut tajuk yang mereka suka.

Pages dapat kita persembahkan dalam pelbagai cara. Antara cara yang paling cepat, mudah dan cantik ialah dalam bentuk menu tab atau navigation bar (nav bar).  Pages juga boleh di persembahkan dalam bentuk drop down menu. Hari ni sis kongsikan cara untuk buat menu tab bergambar dan nav bar dulu ye, next time sis kasi tutorial untuk drop drp menu pula. Masih belum faham? Tak apa meh sini sis kasi contoh untuk menu tab dan navigation bar. Kemudian terpulanglah nak guna cara yang mana ya.

MENU TAB BERGAMBAR

Contoh pertama ni sis ambil dari blog Miss Banu Story. Blog ni sis design dengan meletakkan images sebagai icon untuk mewakili nama semua pages yang Miss Banu mahukan. Seterusnya menu tab ini sis linkkan terus ke pages yang berkaitan supaya apabila di klik maka pengungjung akan terus di bawa ke halaman tersebut. Cara ni sis cukup suka sebab nampak comel dan semestinya design untuk icon menu tab tersebut tidak akan sama dengan mana-mana blog yang lain. Dengan cara ni juga sis boleh design menu tab supaya tampak serasi dengan tema keseluruhan blog. Bagi yang mahu gunakan cara ni boleh ikut langkah seperti di bawah ni ya.

1- Login ke akaun blogger >> Layout >> Add a Gadget >> HTML/Javascript
2- Copy kod di bawah ini dan pastekan ke dalam kotak Html tadi.

<center><a href="LINK BLOG SENDIRI" target="_blank"><img style="width: 140px; height: 47px;" src="LETAK URL IMAGE HOME" border="0" /></a>
<a href="LINK PAGES PERTAMA" target="_blank"><img style="width: 140px; height: 47px;" src="LETAK URL IMAGE MENU TAB" border="0" /></a>
<a href="LINK PAGES KE DUA" target="_blank"><img style="width: 140px; height: 47px;" src="LETAK URL IMAGE MENU TAB" border="0" /></a>
<a href="LINK PAGES KE TIGA" target="_blank"><img style="width: 140px; height: 47px;" src="LETAK URL IMAGE MENU TAB" border="0" /></a>
<a href="LINK PAGES KE EMPAT" target="_blank"><img style="width: 140px; height: 47px;" src="LETAK URL IMAGE MENU TAB" border="0" /></a>
</center>
warna BIRU = Link Halaman
warna MERAH = Link Image Menu Tab
warna UNGU = Lebar dan Tinggi Image Menu Tab

3- SAVE!

Boleh dapatkan Image Menu Tab secara percuma DI SINI

NAV BAR
Cara ke dua ni di panggil nav bar dan ianya lebih mudah dan amat sesuai bagi mereka yang sukakan style simple dan tanpa mahu ada image menu tab sendiri. Cara untuk pasang navigation bar ni ke blog mudah saja.

1- Login ke akaun blogger >> Layout >> Add a Gadget >> HTML/Javascript
2- Copy kod di bawah ini dan pastekan ke dalam kotak Html tadi.

<style>
a.nav{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:5px;
display:inline-block;
text-align:center;
background: #2c97de;
color:#FFF;
width:130px;
padding:2px;}
a.nav:hover{
color: #000;
background:  #ffd6ff;
-moz-box-shadow: inset 0 0 5px 5px #ffd6ff;
-webkit-box-shadow: inset 0 0 30px 30px #ffd6ff;
box-shadow: inset 0 0 30px 30px #ffd6ff;}
</style>
<center>
<a class="nav" href="URL LINK PAGES">TAJUK</a>
<a class="nav" href="URL LINK PAGES">TAJUK</a>
<a class="nav" href="URL LINK PAGES">TAJUK</a>
<a class="nav" href="URL LINK PAGES">TAJUK</a>
<a class="nav" href="URL LINK PAGES">TAJUK</a>
<a class="nav" href="URL LINK PAGES">TAJUK</a>
</center>

warna BIRU = Link Halaman
warna MERAH = Link Image Menu Tab
warna UNGU = Lebar navigation bar

3- SAVE!

Tak tahu macamana nak dapatkan URL link untuk pages? Klik SINI
Ohya, jangan lupa untuk drag gadget dan tempatkan betul-betul di bahagian bawah header. Okay goodluck!

4 comments:

  1. Thanks dear share tutorial ni..
    Rasa mcm mau cuba...
    Cheers.

    ReplyDelete
  2. ASSALAMMUALAIKUM DAN SALAM PERKENALAN SIS HAWA..

    TQVM ATAS TUTORIAL...SANGAT MEMBANTU BAGI BLOGGER BARU SEPERTI SAYA!! :)

    ReplyDelete
    Replies
    1. WAALAIKUMSALAM... sama-sama dik. terima kasih sudi singgah kat sini ya

      Delete

Powered by Blogger.