Menciptakan Tab Menu atau Navigasi di Blogger

Navigasi atau Baris menu (Menu Bar) adalah sebuah baris yang menyusun beberapa tab. Masing-masing dari Tab bisa me-link ke halaman Posting, halaman static, halaman Label, ke alamat web site yang lain, dsb. Membuat tab navigasi sebenarnya tidak terlalu sulit. Pada tutorial berikut, kita akan menginstall Baris Tab di bawah header.

Langkah 1 : Penambahan ke dalam "Add Gadget"

Menambahkan sebuah Add Gadget di HTML Template kamu

1. Go to Dashboard > Design > Edit HTML

2. Backup dulu HTML template kamu

3. Cari baris berikut atau baris yang ada kemiripan di kode HTML kamu :

    <div id='header-wrapper'>

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
    </b:section>
    </div>

4. Kemudian kamu paste / taruh Kode HTML berikut tepat dibawahnya

    <!--Navigation page element starts -->
    <div id='navibar-wrapper'> 
    <b:section class='navibar_section' id='navibar_section' showaddelement='yes'/> 
    </div> 
    <div style='clear: both;'/>
    <!--Navigation page element ends -->

Langkah 2 : Menambahkan di dalam Tab

1. pergi ke layout > Page Elements sub tab

2. klik Add Gadget di bawah header

3. Tarik ke bawah pada jendela Add Gadget, kemudian pilih HTML / Script

4. Kotak Judul biarkan kosong

5. Copy dan Paste kode HTML di bawah ini kedalam kotak isian

  <!-- Navigation tabs start -->
  <div id='navibar'>
  <a href="YourLink1" class="navitabs" title="TooltipText1">ButtonText1</a>
  <a href="YourLink2" class="navitabs" title="TooltipText2">ButtonText2</a>
  <a href="YourLink3" class="navitabs" title="TooltipText3">ButtonText3</a>
  <a href="YourLink4" class="navitabs" title="TooltipText4">ButtonText4</a>
  <a href="YourLink5" class="navitabs" title="TooltipText5">ButtonText5</a>
  <div>
  <!-- Navigation tabs end --> 

gambar berikut merupakan contoh dari kode html yang dimasukkan di blog ini :

6. Replace (Penggantian)

    1. Yourlink dengan halaman atau situs tujuan kamu.

• kamu bisa mendapatkan alamat URL sebuah halaman dengan meng-copy isi dari bar /baris alamat/URL ketika kamu berada pada halaman itu.
• Untuk menampilkan semua postingan dibawah sebuah label (category), kamu perlu me-link ke halaman label tersebut.
• Kamu bisa membuat URL ke halaman (spt contoh label URL) dengan mengikuti format berikut: http://NamaBlogKamu.blogspot.com/search/label/labelkamu.

7. Simpan

Langkah 3 : Memberikan Style pada Tab

Pergi ke Dashboard > Design > Edit HTML

Cari kode HTML berikut di template kalian :

]]></b:skin>

Copy kode HTML dibawah ini dan letakkan (Paste) sebelum (di atas) kode di atas.

/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:150px; height:25px; background:wheat; border:1px solid black; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:black; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:olive;}
#navibar {width:760px; margin:0 auto;}
/* Navigation tabs end */

Langkah 4 : Kostumisasi

• Merubah warna, tinggi, lebar, dll. untuk menyesuaikan keinginan kalian.
• Kalian bisa menambah atau mengurangi jumlah dari Tab. Lakukan di langkah 2, masing-masing baris dari kode (baris 3 sampai 7) yang menyesuaikan Tab.
• Untuk merubah lebar dan tinggi Tab, Rubah nilai di Langkah 3 baris ke-1 ({display:block; width:150px; height:25px;), yang diberi garis merah bisa diganti & disesuaikan dengan keinginan kalian.
• Penambahan jumlah Tab / lebar Tab akan membuat posisi baris Tab tidak di tengah, untuk menjaga posisinya tetap di tengah, kalian harus merubah isi dari width (lebar) pada langkah 3 baris ke-4 ({width:760px; margin:0 auto;}, yang diberi garis merah bisa diganti & disesuaikan dengan ukuran tampilanBlog.
• Jika diinginkan, Kalian bisa memindahkan posisi bar/baris ke atas dari header. caranya adalah :

1. pada langkah 1 baris ke-3, dibagian dalam widget,rubahlah locked='true' menjadi locked='false'
2. Drag & Drop (Geser & Taruh) widget yang berkaitan dalam Page Element page

sumber : alih bahasa dari www.bloggersentral.com