Sebelumnya saya pernah posting cara membuat menu tab navigation horizontal. Mungkin ada diantara teman-teman blogger yang menemukan kesulitan dalam meletakkan kode CSS pada tahapan pengeditan template, untuk itu pada postingan kali ini saya mencoba memberikan solusi ringan berupa sajian 30 tab menu horizontal instant yang siap pakai hanya dengan menambahkan gadget HTML/JavaScript dan meletakkan kode tab pada konten, sekaligus menekankan akan urgennya fungsi tab navigation pada sebuah template.

Langkah-langkah membuat tab menu navigation horizontal
1. Dalam keadaan sig in pada account blogger sobat, pada dasbor => klik Tata Letak=> klik Elemen Halaman
2. Klik Tambah Gadget pada kolom elemen halaman dibawah header atau diatas header
2. Pilih HTML/JavaScript
3. Copy semuae kode tab yang terdapat dalam teks area dibawah tab navigator horizontal pilihan sobat dan paste pada kolom konten
Untuk mengganti link, edit pada bagian HTML semua kode seperti berikut:

<li><a href="#"><span>Link 1</span></a></li>
  <li><a href="#" ><span>Link 2</span></a></li>
  <li><a href="#" ><span>Link 3</span></a></li>
  <li><a href="#" ><span>Link 4</span></a></li>
  <li><a href="#" ><span>Link 5</span></a></li>
  <li><a href="#" ><span>Link 6</span></a></li>
  <li><a href="#" ><span>Link 7</span></a></li>
ganti kode (#) dengan halaman link sobat dan ganti Link1, Link2, Link3 dan seterusnya dengan titel halaman jika ingin menambahkan atau menghapus sebuah tab, sobat tinggal menambahkan atau menghapus bagian baris kode berikut:

<li><a href="#" ><span>Link n</span></a></li>
4. Terakhir jangan lupa simpan dan simpan. Lihat hasilnya pada blog.
Berikut kode 30 tab menu navigasi horizontal

MBT Navigation Menu #1

Black-Orange
MBT Navigation Menu #2
Purple-White-Navigation

MBT Navigation Menu #3
Boxed 1
MBT Navigation Menu #4
 LIGHT-GREY
MBT Navigation Menu #5
Bulleted-top-Navigation
Tabs Menu #6
Tab Menu I
Tabs Menu #7
 Tab Menu G
Tabs Menu #8
 Tab Menu F
Tabs Menu #9
 ZDnet Emulation
Tabs Menu #10
 Tab Menu E
Tabs Menu #11
 Tab Menu D
Tabs Menu #12
Tab Menu 12
Tabs Menu #13
 Tab Menu 11
Tabs Menu #14
Tab Menu 10
Tabs Menu #15
 Tab Menu 9
Tabs Menu #16
 Tab Menu 6
Tabs Menu #17
 Tab Menu 8
Tabs Menu #18
Tab Menu 7
Tabs Menu #19
Tab Menu K
Tabs Menu #20
Tab Menu 4
Tabs Menu #21
 Tab Menu 3
Tabs Menu #22
 Tab Menu 2
Tabs Menu #23 Square
Tabs Menu #24
Horizontal Buttons
Tabs Menu #25
Tab Menu H
Tabs Menu #26
 Tab Menu 1
Tabs Menu #27
 Tab Menu A
Tabs Menu #28 Tab Menu 5
Tabs Menu #29
 Tab Menu B
Tabs Menu #30 Tab Menu J
Thanks to My Blogger Trick

0 komentar:

Posting Komentar

 
Asep Ropi dot Com © 2013. All Rights Reserved. Powered by Blogger
Top