Membuat Menu Horizontal Navigasi

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 Monster Zila */

#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/AVvXsEgAMKZve-ihAYu5xsecXKAiF0SvoaHOxjv7O93irRp6tBG-ms0nnMwFZfFkJQo1Zpd1iAFgkZhz9iU-EAA_GJAz4y4lQ2Ef-_RQKAZNrEsthF7lScm25JQRtLGgwwTk_Onvyx5Hh0K686Au/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

Share 'Membuat Menu Horizontal Navigasi' On ...

Membuat Menu Horizontal Navigasi 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.