Cara Membuat Menu Navigasi Pada Blogspot

Cara Membuat Menu Navigasi Pada Blogspot - Beberapa hari yang lalu, sahabat saya My Bands dari Malaysia, melalui Shout Box bertanya tentang cara membuat menu navigasi horizontal seperti di blog ini. Untuk membuatnya, kita bisa menggunakan JavaScript atau bisa juga dengan CSS (Contek Sana Sini ...). Banyak tutorial yang membahas masalah ini, seperti Suhu "Kang Rohman", karena saya adalah orang yang sangat awam dengan dunia CSS, maka saya hanya akan menunjukkan link-linknya saja, tanpa membahasnya secara detail. Hal ini juga termasuk rasa terima kasih saya pada mereka, para Suhu Blogger...

Untuk menu di blog ini, sang pembuat templet tampaknya memang sengaja memakai Widget LinkList yang ada pada fitur blogger, lalu ditaruh di bagian header, dan dikombinasikan sedikit dengan bahasa CSS. Templet blog ini saya dapatkan dari Suhu O_OM, yakni Elegant Style & SEO Friendly yang kemudian saya improvisasikan dengan templet milik O_OM sendiri. Sorry, Suhu...sudah "nyontek" templetnya tanpa idzin.... Thank's untuk Suhu atas templetnya...

Oke, kita langsung saja ke TKP. Ada banyak tampilan yang bisa kita aplikasikan di blog kita. Silahkan pilih yang sobat sukai.

Horizontal tab menu 10 :




Untuk membuatnya, silahkan klik di sini.

Horizontal Tab menu J :



Untuk membuatnya, silahkan klik di sini.


Free Horizontal Tab Menu F :




Untuk membuatnya, silahkan klik di sini.

Menu Drop down dengan CSS :



Untuk membuatnya, silahkan klik di sini.

Menu navigasi-dengan-css-2 :



Untuk membuatnya, silahkan klik di sini.

Menu Navigasi Css 6 :



Untuk membuatnya, silahkan klik disini.

Menu Navigasi Link List :



Untuk membuatnya, sobat bisa mendownload templet Elegant Style & SEO Friendly, kemudian improvisasikan dengan blog ini. Atau sobat bisa menambahkan kode Css sebelum tag dan id navbar pada bagian body.

Kode CSS :

/*-- (Menu/Nav) --*/
#nav{background:#fff url(http://i290.photobucket.com/albums/ll256/angkatan2006/untuk%20header/topmenubgrhy3.gif) no-repeat; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:660px; padding-left:6px}
#nav-right{float:right; display:inline; width:200px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold;}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}
/*-- (Search) --*/
#search{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoBvRA1ciUgHhdlyAbwj7vc_OFZhjy33OQG3S8SpfWz7tFgQ4A7O-_rQXZiY09BG1gftxclKt9N1wdjn8uXBQyXoJQzL6snLTd2cqqF3pF5INbtEphYpO6JTf6RvcdIdIqNP1NzVi0hTAu/s400/search.gif) 6px 0px no-repeat; border:1px solid #333; float:right; height:23px; margin:0 15px 0 0; width:180px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 30px; width:140px}

Dan id Navbar biasanya seperti ini.

* sesuaikan kode warna #fff dan link url yang berwarna merah dengan templet milik sobat.

Note :

Tiap templet kadang memakai kode yang berbeda. Ada yang berhasil dan ada pula yang gagal. Maka, jika sobat adalah termasuk tipe pemalas seperti saya , maka lebih baik cari templet garatisan saja (usahakan yang sudah terpasang menu navigasinya). Selamat bereksperimen ria...