Cara Membuat Menu Navigasi Sederhana di Blog

Hai Sobat Sukses...

Kali ini saya selaku admin Blog Sukses Ahta ingin berbagi tutorial tentang Navigation Menu atau Menu Navigasi...

Menu navigasi sebenarnya merupakan tab-tab menu yang berisikan link menuju halaman atau artikel yang kita inginkan atau bahasa kerennya adalah Shortcut... 

Navigasi menu ini berfungsi sebagai penunjuk arah kepada halaman-halaman mandiri yang ada di blog sobat sukses, untuk dipromosikan maupun agar bisa diakses oleh pengunjung blok sobat.

Dan sudah semestinya isi dari halaman yang ditunjukan di navigasi bar harus sesuai dengan judul tab navigasi barnya. Biasanya navigasi bar ini berada di header blog, namun sobat sukses bisa menempatkanya dimana saja yang di inginkan. 

Screenshotnya bisa dilihat dibawah :

Pengen? Liat cara di bawah :

1. Login ke blogger
2. Masuk ke >>Tema >> Edit HTML
3. Cari kode ]]></b:skin> gunakan ctrl + F agar lebih mudah lalu paste-kan kode berwarna merah di bawah ini tepat di atas kode ]]></b:skin>

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;}

4. Save. Setelah Itu
5. Masuk ke >>Tata Letak>> Tambah Gadget >> HTML/Javascript
6. Paste-kan kode script di bawah ini:

<div id='burasbar'>
<a class='burastabs' href='paste-kan url halaman di sini#'>Home</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>About</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Tutorial</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Widget</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Mobile</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Facebook</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Twitter</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Advertise</a>
</div>

7. Sekarang sobat sukses tinggal men-copy url halaman yang ingin ditampilkan pada tulisan yang berwarna biru di atas. Sobat bisa menambah atau mengurangi tab yang ingin ditampilkan di navbar dengan cara menghapus satu baris atau menambah satu baris yang ada di antara kode:

<div id='burasbar'> dan  </div>

Tulisan yang berwarna hijau boleh diganti sesuai keinginan sobat.

8. Kemudian masih di dalam >>Tata Letak, geser gadget yang baru sobat buat ke posisi header atau di posisi yang sobat inginkan.

Jika semua sudah OK, Tinggal Di Save

Selamat mencoba.

Semoga berhasil....!