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.

This work is protected by Copyscape and licensed under a Creative Commons Attribution - Non Commercial - Share Alike 3.0 Unported License. Articles cannot be reproduced without permission from the author. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page.

Silakan tinggalkan jejak anda dengan berkomentar, Insya Allah agar saya bisa rutin mengunjungi blog anda. Jika belum paham mengenai artikel Cara Mudah Membuat Menu Navigasi Horizontal Ajaib, tanyakanlah. Jika ada usulan atau keluhan, izinkanlah saya mengetahuinya. Tanggapi dengan komentar yang bijak dan jangan sia-siakan waktu anda dengan melakukan spam.

13 Komentar:

Beben Koben said...

iyah ish ajaib, kok bisa igtu yak..hihihihi
salam Beben si bloglang anu ganteng kalem tea \m/

Unknown said...

salam sahabat
cara singkat dan mudah membuat menu navigasinya yach terima kasih

Aku Tidak Juga Kau said...

Keren sob, bisa menjadi alternatif menu horizontal yang konvensional nih

Ihsanul Huda said...

@Beben: Ya nih mas, saya juga sbnarny ga sngaja buat navigasi ini, awaly cuma eksperimen kecil, iseng coba-coba main CSS, t'nyata keajaiban hover link navigasiny t'jadi karna kombinasi dari html postingan ini..

Ihsanul Huda said...

@Dhana: Trimakasih kmbali mba Dhana.. Salam sahabat..

@Ardhiansyam: Thanks y sobat, sbnarny menu ini juga masih konvensional juga, hanya saja cuma lbih dvariasikn saja.. :)

2012 said...

tips nya bagus neeh..
kpan" bleh di coppas kodenya?

Ihsanul Huda said...

@2012: Thanks mas, silakn dcopas dgn harapan ttap mnjaga amanat ilmiah jika ingin ddistribusi ulang.. Salam..

Anonymous said...

boleh 3X... tp saya lebih suka pake css drpada tag html(tr/td)...

Ihsanul Huda said...

@Gori: Ya mas, biasay hasilny lbih cantik y, bisa ada drop down, apalagi kalo pake jquery, jadi lbih smooth.. Bahkan skrng sbnrny buat menu navigasi bisa lbih mudah dan instant dgn software css tab designer 2, 3.. :)

Roni said...

tips nya bagus neeh..
kpan" bleh di coppas kodenya?

kilassemarak said...

terima kasih ilmunya gan.sukses selalu

kilasemarak said...

trims infonya ya bos

Amru Fian said...

Makasih banget gan :D terbantu banget ane gan :D

Post a Comment