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.

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 ...

Ditulis oleh: ahmad mustaghfirin - Sunday, March 24, 2013

Belum ada komentar untuk "Cara Membuat Menu Horizontal Navigasi"

Post a Comment