Membuat Menu Navigasi Blog

Anda dapat mengelompokan postingan pada blog anda sesuai dengan kategori / temanya masing – masing, dengan cara membuat menu navigasi pada blog anda. Penempatan nya yaitu di bagian navbar atau header pada blog anda, sehingga dapat memudahkan pengunjung untuk dapat mencari posting yang merka butuhkan sesuai dengan kategorinya masing – masing. Sampai saat ini Blogger tidak menyediakan menu navigasi ini secara otomatis pada template nya. Secara default menu navigasi yang terdapat pada template yang di sediakan oleh Blogger hanya memiliki 1 bagian / 1 halaman untuk posting. Sekarang anda dapat membuat menu navigasi tersebut secara manual. Langkah – langkahnnya adalah sebagai berikut :


Langkah Pertama

1. Masuklah ke halaman Panel Control / Kostumisasi
2. Masuk ke Tata Letak
3. Edit HTML
4. Checklist bagian yang bertuliskan “Expand Template Widget”
5. Pada kotak html, cari kode :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='header1' locked="true"
title=''(header)'type='header'>


(bila anda mengalami kesulitan dalam mencarinya, anda bisa menggunakan bantuan searching dengan menekan tombol ctrl+F. Ketik kode tersebut ,lalu find.)
6. Setelah menemukan kode tersebut maka lakukan pengeditan pada kode-kode yang ditulis dengan huruf tebal. Maxwidgets=’1’ diganti menjadi Maxwidgets=’2’, showaddelement='no' menjadi showaddelement='yes’ dan locked="true" menjadi locked="false". Sehingga kode tersebut akan berubah menjadi :



<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='header1' locked="false"
title=''(header)'type='header'>





Langkah Kedua

1. Setelah selesai, kita masih harus melakukan pengeditan di halaman Edit HTML.
2. Cari kode

]]></skin>


dengan cara yang sama, yaitu dengan menekan tombol ctrl+F, lalu find.
3. Setelah anda menemukan kode tersebut, selanjutnya anda harus mengetikan kode berikut di atas kode

]]></skin>




Kode :


#menunavigasi{float:left;widht:100%;
background#transparent;
font-size:13px;
line-height:normal;
}
}
#menunavigasi u1 {margin:0;padding:10px 10px 0 5x;
list-syle:none;
}
#menunavigasi li {
display:inline;
margin:0;
padding:0;
}





4. Jika sudah selesai, SIMPAN TEMPLATE


Langkah Ketiga

1. Selanjutnya masuk ke Tata Letak blog anda. Akan terdapat tambahan Tambah Gadget pada bagian header blog anda.
2. Klik Tambah Gadget untuk menyisipkan kode berikutnya.
3. Setelah mucul beberapa pilihan menu, pilih HTML/JavaScript untuk menyisipkan kode berikutnya.Klik tanda “ + “ pada bagian pojok kanan atas dari menu HTML/JavaScript tersebut.
4. Perhatikan halaman konfigurasi HTML yang muncul. Pada isian Konten, ketikan kode script untuk memunculkan menu navigasi pada blog anda. Sedangkan pada bagian judul biarkan dikosongkan saja.

Berikut ini adalah kode script yang harus di tulis pada halaman HTML tersebut :


<div id="menunavigasi"><u1>






<li><a
href="http://1.blogspot.com"><span>nama</span></a>
</li>







<li><a
href="http://2.blogspot.com"><span>nama</span></a>
</li>







<li><a
href="http://3.blogspot.com"><span>nama</span></a>
</li>




(Pada bagian yang bertuliskan angka 1, 2 ,3 itu dapat anda tuliskan alamat dari blog yang anda miliki. Dan nama adalah nama / kategori dari menu navigasi yang ingin anda buat.)

5. Bila anda telah selesai mengetikan kode-kode tersebut dan dipastikan tidak ada yang salah,selanjutnya klik “ SIMPAN ”. Sebelum anda menyimpannya anda dapat melakukan pemindahan Sub Elemen menu navigasi pada halaman Panel Control, ini dilakukan agar blog anda terlihat lebih rapi. Letekan Sub Elemen menu navigasi tersebut dibagian bawah dari header dengan cara drag and drop.

6. Jika tidak ada kesalahan dalam pengetikan kode-kode tadi,setelah di simpan maka akan muncul pemberitahuan bahwa perubahan yang anda lakukan telah berhasil.

7. Lalu klik “ Lihat Blog ”

Contoh diatas hanya menampilkan 3 menu navigasi. Bila anda ingin memiliki lebih dari 3 menu navigasi, maka anda dapat menambahkan kode dibawah ini :


<li><a
href="http://4.blogspot.com"><span>nama</span></a>
</li>





Tulis kode tersebut setelah kode



<li><a
href="http://3.blogspot.com"><span>nama</span></a>
</li>




Selamat Mencoba....