Membuat Menu Horizontal Navigasi - Smart Education

Membuat Menu Horizontal Navigasi - Membuat Menu Horizontal Navigasi
Baik Sobat Kali Ini Saya Mau Posting Cara Membuat Menu Horizontal Navigasi, Baiklah, Membuat Menu Horizontal Navigasi Ini Sangat Penting Untuk Blog Kenapa ? Karena Dengan Adanya Menu Horizontal Navigasi Akan Memudahkan Pengunjung Blog Untuk Mencari Sesuatu Di Blog Kita Serta Blog Kita Akan Terasa Lebih Indah Dimata Pengunjung

Demo

Berikut Tutorialnya :

• Login Blogger
• Klik Template
• Edit HTML
• Centang Expand Template Widget
• Cari Kode ]]></b:skin>
• Copy Kode Dibawah, Lalu 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELFY-nME72TTTRVAogG66hkcrQMU7816DG84yFpTUOzENY0giYr0R40DOvqkeiPPGxKEizB1EZQ5TU1QMkVd79Hm8CquOA-0kykS9EtRX-xqTg5rd1Tx86FhVHJuCXRjTdQ4nMKdH5EOI/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;

}

• Lalu Cari Kode <div id='header-inner'>
• Kalau Tidak Ketemu Cari Kode Yang Sejenis, Karena Setiap Template Berbeda-Beda
• Copy Kode Dibawah Lalu Paste Dibawah Kode <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 : Kode Diatas Juga Bisa Diletakkan Di HTML/JavaScript
• Klik Pratinjau, Jika Berhasil Maka Klik Simpan Template

Sobat Bisa Mengeditnya Sendiri
Semoga Bermanfaat, Jika Dirasa Tulisan Saya Menarik Silahkan Sobat Sebar Luaskan Artikel Ini , Dan Jangan Lupa Beri Link Ini Sebagai Sumbernya.
Sumber : http://art-preview.blogspot.com/2012/09/membuat-menu-horizontal-navigasi.html

Tweet

Unknown pada 5/08/2013