Cara Mudah Membuat Menu Navigasi Horizontal Ajaib

Apa itu tombol navigasi? 

Tombol navigasi adalah tombol yang digunakan oleh pembaca blog untuk memudahkan mereka dalam menjamah dan mendapatkan berbagai informasi yang tersedia pada blog tersebut. Tombol navigasi ini biasanya berada di atas header blog atau di bawahnya, atau biasa juga pada bagian sidebar blog yang biasa dikenal dengan sebutan Menu Navigasi Vertical. Pada postingan terdahulu telah dijelaskan bagaimana cara membuat navigasi juga, yaitu navigasi breadcrumb tapi fungsi dan peletakan navigasi ini berbeda dengan navigasi yang akan saya jelaskan sekarang. Navigasi Breadcrumb tersebut terletak di atas posting blog, jika anda lupa atau hanya sekedar ingin mengetahuinya lebih lanjut apa itu navigasi breadcrumb bisa dibaca kembali di Cara Membuat Menu Navigasi Breadcrumb.

Baiklah kita fokus kembali pada topic utama judul postingan ini. Berikut langkah-langkah yang harus anda ikuti untuk membuat menu navigasi horizontal pada blogger:

1. Seperti biasa login ke account blogger, kemudian pilih menu Design > Page Element, lalu Add a Gadget. 

2. Masukkan kode berikut pada HTML/Javascript gadget anda:

<style type="text/css">.menulink{ text-decoration:none;color:#ffffff;font-size:13px;} </style><font face="Arial, helvetica, sans-serif"> 

<table border="2" width="620" height="28" style="border-collapse:collapse" cellpadding="" cellspacing="0" bordercolor="#ffffff"><tr> 

<td align="center" bgcolor="#505D7A" onmouseover="style.backgroundColor='#5D6B8D'" onmouseout="style.backgroundColor='#505D7A'" onclick="javascript:location.href='#'"><a href="#" class="menulink" onmouseover="style.color='#f0f0f0'" onmouseout="style.color='#E0E55C'">Link 1</a> </td> 

<td align="center" bgcolor="#505D7A" onmouseover="style.backgroundColor='#5D6B8D'" onmouseout="style.backgroundColor='#505D7A'" onclick="javascript:location.href='#'"> <a href="#" class="menulink" onmouseover="style.color='#f0f0f0'" onmouseout="style.color='#E0E55C'">Link 2</a></td> 

<td align="center" bgcolor="#505D7A" onmouseover="style.backgroundColor='#5D6B8D'" onmouseout="style.backgroundColor='#505D7A'" onclick="javascript:location.href='#'"> <a href="#" class="menulink" onmouseover="style.color='#F0F0F0'" onmouseout="style.color='#E0E55C'">Link 3</a></td> 

<td align="center" bgcolor="#505D7A" onmouseover="style.backgroundColor='#5D6B8D'" onmouseout="style.backgroundColor='#505D7A'" onclick="javascript:location.href='#'"><a href="#" class="menulink" onmouseover="style.color='#F0F0F0'" onmouseout="style.color='#E0E55C'">Link 4</a></td> </tr> </table></font>

Hasilnya menjadi:

Link 1

Link 2

Link 3

Link 4

Anda dapat memberikan variasi warna dan pengaturan kode CSS lain agar terlihat lebih indah seperti: 

Link 1

Link 2

Link 3

Link 4

Berikut keterangan kode penting yang harus anda ganti: 

width="620" height="28" /*Sesuaikan dengan ukuran lebar main-wrapper blog anda dan ubah juga tinggi menu tab sesuai selera anda. /*

href='#'"> <a href="#" /*Tanda "#" ini anda ubah sesuai dengan url blog yang anda inginkan. /*

Pengaturan warna saya rasa anda sudah mngerti, lihat saja kata color pada kode CSS. Jika anda ingin dengan mudah menentukan warna yang anda inginkan, saya sudah membuatkannya kode warna slider tab. Silakan check kode warna yang anda inginkan di sini atau pilihan fasilitas kode warna lainnya melalui label warna berdasarkan kategori di sini. 

Demikian sharing tutorial cara mudah membuat menu navigasi horizontal pada blogger. Ohya, apakah anda masih bingung mengapa judul postingan ini diganti dan dimana letak keajaiban menu navigasi horizontalnya? Coba anda hover atau sorot link menu pada tab navigasi, seolah-olah warna link tersebut menyala dan berubah warna setelah kita sentuh dengan mouse arrow kita. Mungkin ini hanya berlaku di postingan ini, semoga juga berlaku pada gadget blogger anda ketika mencobanya. Akhirnya misteri blogger pemula mengenai tutorial membuat menu navigasi horizontal telah terpecahkan dengan segala keajaiban yang ada di sini.  

Selamat mencoba dan semoga anda puas dengan hasil yang anda buat.