Membuat Menu Horizontal Navigasi - Smart Education

Membuat Menu Horizontal NavigasiMembuat 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



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(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;
}

  • 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

4 komentar untuk "Membuat Menu Horizontal Navigasi - Smart Education"

  1. wah, makasih ya info cara ngeditnya
    baru ngerti saya
    kunjungan baliknya ya, ke
    http://jonarendra.blogspot.com

    BalasHapus
  2. mas yoga ]]> di blog saya www.akuisam.blogspot.com kok ga ada gimana ?

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top