Cara Membuat Menu Horizontal Navigasi

Cara Membuat Menu Horizontal Navigasi | Banyak dari teman-teman saya yang menannyakan bagaimana sih cara membuat NAVBAR / NAVIGASIBAR / MENU HOME dan lainnya diblogger. Sebetulnya jika kita mau googling sudah ada banyak yang menyediakan tutorial cara membuatnya. Namun tidak sedikit pula yang saya temukan bahwa tutorialnya/codenya tidak Valid.

Nah kali ini akan kita bahas bersama bagaimana sih Cara Membuat Menu Horizontal Navigasi yang Valid? Pada kesempatan ini saya ambilkan peng-Codingan dari Miliknya Mas Riyanto yang sudah saya tes dan hasilnya 100% Valid.

Demo

Nah dbagi agan-agan yang sudah tidak sabar lagi silahkan simak tutorialnya dibawah ini :

• Login Blogger
• Klik Template
• Edit HTML
• Ceklist/Centang Expand Template Widget
• Cari Kode:  ]]></b:skin> (Gunakan Ctrl + F untuk mempermudah pencarian Code)
• Copy Kode Dibawah ini, Kemudian Paste Diatas Kode ]]></b:skin>

/* Menu Navigasi By Art Preview */
#menus {
border-bottom:1px solid #ddd;
border-top:1px solid #ddd;
border-right:1px solid #ddd;
border-left:1px solid #ddd;
height:31px;
}
#menus li {
display:inline;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#menus li a {
background:transparent url(http://3.bp.blogspot.com/_66wIGDjagHk/Siu-20JiAVI/AAAAAAAAAj0/0HpoiYZVXOk/s1600/menu.gif) no-repeat scroll 0 0;
color:#382E1F;
display:block;
float:left;
font-size:12px;font-weight:normal;font-family:comic sans ms;
height:31px;
line-height:31px;
margin-left:-10px;
padding:0 20px;
text-decoration:none;
z-index:1;
}
#menus li a:hover, #menus li a.current {
background-position:0 -31px;color:#cccccc;font-weight:normal;
}
#menus li.current_page_item a, #menus li.current-cat a {
background-position:0 -62px;
}
#menus li a.home {
background-position:0 -93px;
margin-left:0;
padding:0;
text-indent:-999em;
width:45px;
}
#menus li a.home:hover {
background-position:0 -124px;
}
#menus li.current_page_item a.home {
background-position:0 -155px;
margin-left:-40px;
}
#menus li a.lastmenu:hover {
background-position:0 0;
cursor:default;
}

Langkah selanjutnya adalah :

• Lalu Cari Kode <div id='header-inner'>

• Kalau agan-agan Tidak menemukannya, agan-agan bisa Cari Code Yang Sejenis, Karena Setiap Template Berbeda-Beda

• Copy Kode Dibawah kemudian Paste Dibawah Code <div id='header-inner'>

<!-- Menu Navigasi Start -->
<ul id='menus'>
<li class='current_page_item'><a class='home' href='#' title='Home'></a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a href='#' title='Menu 3'>Menu 3</a></li>
<li><a href='#' title='Menu 4'>Menu 4</a></li>
<li><a href='#' title='Menu 5'>Menu 5</a></li>
<li><a href='#' title='Menu 6'>Menu 6</a></li>
</ul>
<!-- Menu Navigasi End -->


Keterangan : Code Diatas Juga Bisa Diletakkan Di HTML/JavaScript

• Klik Pratinjau dulu untuk meminimalisir apakah ada kesalahan atau tidak, Jika Berhasil Maka Klik Save Template

Share 'Cara Membuat Menu Horizontal Navigasi' On ...

Anda baru saja membaca artikel yang berkategori CSS / Modifikasi Blog dengan judul Cara Membuat Menu Horizontal Navigasi. Anda bisa bookmark halaman ini dengan URL http://codingngeblog.blogspot.com/2013/03/cara-membuat-menu-horizontal-navigasi.html. Terima kasih!

Ditulis oleh: Unknown - Sunday, March 24, 2013