Cara Membuat Tab Menu Blog

menu navigasi horizontal dropdown


Assalamualaikum Teman..
kali ini saya akan berbagi mengenai cara membuat tab menu pada blog. Sebagai contoh, teman bisa melihat pada bagian atas blog saya tepatnya dibawah gambar header. Untuk membuat menu berjajar secara horizontal seperti demikian teman - teman cukup membuat widget baru dan mengcopy paste kode HTML yang tertera dibawah.
seperti biasa, caranya cukup mudah :)
  • Pertama masuklah ke dashboard lalu klik design
  • Pada menu page elements klik add a gadget
  • Pilih HTML/Javascript
  • Masukkan kode HTML berikut ini pada content
<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:
#000;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='
#'>Home</a></li>
<li><a href='
#'>Menu 1</a></li>
<li><a href='
#'>Menu 2</a></li>
<li><a href='
#'>Menu 3</a></li>
<li><a href='
#'>Menu 4</a></li>
</ul>
</div>
  • Silakan ganti karatker berwarna merah tersebut dengan kode warna yang teman inginkan. pada contoh saya menggunakan #000 yang merupakan kode warna hitam.
  • Ganti karakter # dengan alamat yang teman inginkan serta edit nama Menu 1, Menu 2, dst sesuai dengan kebutuhan .
  • Jika teman ingin menambah menu baru cukup dengan menggandakan kode <li><a href='#'>Menu </a></li> dan letakkan diatas </ul> .
  • Klik save..
  • Untuk menempatkannya posisinya diatas teman cukup menggeser widget ini tepat dibawah header atau dapat disesuaikan posisinya sesuai selera.
Bagaimana ? Mudah bukan ? :)
Apakah teman berhasil menerapkannya?

Regards,

Berlangganan Artikel Referensi Kita

Masukkan alamat email Anda:

Related Post:

+ comments +13comments

26/4/12 14:42

Wahhh..mantef tuh bang Irfan tutornya..salut bang..hahahyyy

Terimakasih ICAH BANJARMASIN atas Komentarnya di Cara Membuat Tab Menu Blog
26/4/12 17:53

terima kasih bang icah atas kunjungannya .. :)
tunggu lawatan saya ke blog abang :)

26/4/12 19:49

keren sob,
izin simpan ya
terima kasih sebelumnya

Terimakasih SAZLINA COMP atas Komentarnya di Cara Membuat Tab Menu Blog
27/4/12 01:50

sama - sama sob.. silakan disimpan dan dicoba jika berkenan :)
terima kasih atas kunjungannya :D

30/4/12 21:51

Tips yang sangat bermanfaa, rupanya mudah banget caranya.., lgsng dicoba tipnya sob, salam sukses...

Terimakasih COF atas Komentarnya di Cara Membuat Tab Menu Blog
1/5/12 19:23

yup.. terima kasih atas kunjungannya sobat :)
semoga bermanfaat

1/5/12 23:51

siiiplah..
^_^)b

oya sob, soal widget top komentator ama recent commen searching aja di google sob, byk kok situs yg membahasnya.
aku jg dpt searching dr google sob.

Terimakasih Penghuni 60 atas Komentarnya di Cara Membuat Tab Menu Blog
2/5/12 03:19

sederhana tapi mantab :) salam kenal dan saling support

Terimakasih Risalahati atas Komentarnya di Cara Membuat Tab Menu Blog
2/5/12 19:10

thanks sob.. alhamdulillah udah terpasang diblog widgetnya :)

2/5/12 19:11

yup.. tunggu support saya ke blog sobat :D

3/5/12 05:18

mantap gan share ilmunya...bermanfaat banget buat nubie mcm sy ne...terimakasih,ditunggu update selanjutnya..

Terimakasih dhlondhenk atas Komentarnya di Cara Membuat Tab Menu Blog
Anonymous
10/12/12 20:01

bang kok blog saya jadi amburadul.....gimana sih caranya gan...kodenya saya sdh kasi masuk tapi mlh berantakan......

Terimakasih Anonymous atas Komentarnya di Cara Membuat Tab Menu Blog
22/2/13 09:02

Sob kalo mo di tambah menu dropdown caranya gimana?

Post a Comment