Cara Membuat Menu Navigasi Bar Sederhana Pada Blog

Cara Membuat Menu Navigasi Bar Sederhana Pada Blog - Menu navigasi atau yang sering disebut juga navigation menu merupakan sebuah tab menu yang berisi penunjuk arah pada bagian kategori/label dari Blog atau Situs, dan berisi sebuah link tujuan sesuai dengan nama menu yang tercantum. Menu navigasi sendiri berada pada bagian atas atau Header. banyak para blogger menggunakan menu navigasi agar blog mereka terlihat lebih teratur dan memudahkan pengunjung untuk mencari apa yang mereka inginkan. 

Bagi anda para blogger yang berminat untuk membuat sebuah navigasi bar sederhana pada Blog anda, silahkan lihat langkah-langkah di bawah ini. setelah anda melaukan pemasang kode HTML pada blog anda, silahkan edit menu navigasi bar yang anda buat agar terlihat lebih menarik sesuai keinginan anda.

Tutorial Membuat Menu Navigasi Bar:

1. Pertama kali silahkan login ke Blogger

2. Masuk ke bagian Template > Edit HTML

3. Cari kode berikut ]]></b:skin> (untuk lebih cepat tekan Ctrl + F untuk mencari kode), pastekan kode tersebut di atas kode berikut

/* Menu Navigasi Riedz Blog - D Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Menu Navigasi Ends */

4. Tahap selanjutnya tinggal anda klik save

5. Kemudian sekarang anda pergi ke Tata Letak > Tambah gadget > HTML Javascript

6. Pastekan kode di bawah ini pada kotak HTML

<!-- Menu Navigasi http://riedzz.blogspot.com Starts -->
<div id='burasbar'>
<a class='burastabs' href='#'>Home</a>
<a class='burastabs' href='#'>About</a>
<a class='burastabs' href='#'>Tutorial</a>
<a class='burastabs' href='#'>Widget</a>
<a class='burastabs' href='#'>Mobile</a>
<a class='burastabs' href='#'>Facebook</a>
<a class='burastabs' href='#'>Twitter</a>
<a class='burastabs' href='#'>Advertise</a>
</div>
<!-- Menu Navigasi Ends -->

7. Juga sudah selesai, klik save dan tunggu hingga proses selesai.

8. Lihat hasilnya pada Blog anda.

Itulah seputar cara mudah yang bisa anda coba untuk membuat menu navigasi bar pada blog anda. bagaimana, sangat mudah bukan untuk dicoba? setelah memeasang menu tersebut, maka blog anda akan terlihat lebih indah untuk dipandang mata oleh para pengunjung. selamat mencoba dan semoga berhasil.