Cara Membuat Menu Navigasi Horisontal di Blog

Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Umumnya, para blogger menggunakan fungsi menu navigasi horizontal untuk dipasang di blognya. Pada artikel tutorial kali ini saya akan membahas tentang petunjuk pemasangan menu navigasi ini pada template blog blogger maupun wordpress.org.

Pada tutorial kali ini, saya kan membahas tentang menu navigasi horizontal, langsung saja yak!

Style Nav : O-OM template

Untuk Blogger.com

1. Login di Blogger
2. Rancangan » Edit HTML » Expand Template Widget
3. Cari ]]></b:skin>
4. Letakan kode CSS berikut, diatasnya

#nav { background:url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLSlYCQQEh6pJZn02ojlnlNeK4vRzQDDgMnDNK8zu_XCe95yqkZuqN5_sdpCYHS3Kpwkjq1lsvGj23Mx89zBWwsxzxxcZqmwHMicMqid5iaLVUj67FtIOdiA0h6VlJSaG4OmdVaDnOf5JF/s1600/topmenu-c.png”) no-repeat scroll 0 0 #FFFFFF; clear:both; height:32px; margin:0 auto; padding:4px 0 0; } #nav-left { display:inline; float:left; padding-left:6px; padding-top:1px; width:660px; } #nav-right { display:inline; float:right; padding-right:15px; padding-top:3px; width:200px; } #nav ul { font:bold 1em Verdana,Arial,Helvetica,sans-serif; margin:0; overflow:hidden; padding-left:0; position:relative; } #nav ul li { float:left; list-style:none outside none; } #nav ul li a, #nav ul li a:visited { color:#FFFFFF; display:block; margin:1px 4px; padding:4px; text-decoration:none; } #nav ul li a:hover { -moz-border-radius:3px 3px 3px 3px; background-color:#999999; color:#FFFFFF; margin:1px 4px; padding:4px; } #nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover { -moz-border-radius:3px 3px 3px 3px; background-color:#999999; color:#FFFFFF; margin:1px 3px; padding:4px; }

NB : Kamu bebas mengganti seperti warna background, ukuran lebar, dll sesuai selera kamu!
5. Untuk meletakanya di dalam template, cari kode : <div id=”header-wrapper”>
   kalau tidak ada, coba pakailah add-ons mozilla FIREBUG! untuk mempermudahnya
6. Setelah itu, pastekan kode HTML berikut di bawah kode tadi. Ini kode HTML-nya :

<div id=”nav”> <div id=”nav-left”> <ul> <li><a href=”#“><img border=”0″ style=”padding: 0px;” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRsxIS3Tm3qXvKomUgZOqBDULGLxfOb8jgaV14DNUVPLF6fFHhmOQHEUKX9idXJzZhcl-5MZRB5yycc-2sdxhGAqYMxkO5pKCjezfb9xSZDTsB2K2i5197HeHeKamfD2HbWR4twdRAyDdd/s200/icon-home.png”></a></li> <li><a  href=”#“>About Me</a></li> <li><a  href=”#“>Archives</a></li> <li><a  href=”#“>Contact</a></li> <li><a  href=”#“>Help Me</a></li> <li><a href=”#“>Guest Book</a></li> <li><a href=”#“>Testimonials</a></li> <li><a  href=”#“>Top Post</a></li> </ul> <script language=”javascript”>setPage()</script> </div> <div id=”nav-right”> <div id=”tsrc-m”> <div id=”src-m”> <form name=”searchform” method=”get” id=”searchform” action=”/search”> <input type=”text” value=”Cari artikel..” onfocus=”if (this.value == &quot;Cari artikel..&quot;) {this.value = &quot;&quot;}” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel..&quot;;}” name=”q” id=”s-m” class=”keyword”> <input type=”image” style=”border: 0pt none; vertical-align: top; padding-top: 3px;” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnRDetL0cvodm1uFTNEF341oYaHwb-loXp2puTkHLrGmpUww7QUaGs1sCIYLpNHBKZbHh3TeHnofWehHz-WttKM0lk6DqbzIN8AkXJf1xrKY6kq3wyMrUyosHeKh_0XzvEJKIY_QgYF8/s200/search-c.png”> </form> </div> </div> </div> </div>

NB : Ubahlah warna merah atau nama menu + URLnya sesuai kebutuhan kamu, seperti Contact, About Me, kamu dapat bebas menggantinya!
7. Selesai, dan Simpan Template, semoga berhasil!!
8. Semoga Bermanfaat

Posted in: Tutorial Blogger