-->
» » Cara membuat Menu Navigasi Vertikal Melayang Dengan Icon di blog

Cara membuat Menu Navigasi Vertikal Melayang Dengan Icon di blog

A. Tutorial

1. Login ke blogger, pilih blog dan masuk ke Edit HTML Template
2. Copy CSS berikut ini dan paste di atas kode ]]></b:skin> atau </style>


#sidebar-kiri {
  position:fixed;
  background:#222;
  width:200px;
  height:100%;
  z-index:9999;
}
.vertikal-nav {
  width:200px;
  margin:0;
  padding:0;
  float:left;
  font-family:Segoe UI,Arial;
  position:relative;
  list-style:none;
  z-index:9999;
}
.vertikal-nav li {
  display:block;
  width:100%;
  padding:0;
  float:left;
  font-size:14px;
  position:relative;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
.vertikal-nav li a {
  width:100%;
  display:block;
  padding:15px 20px 15px 19px;
  color:#888;
  text-decoration:none;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -o-transition:all .3s ease-in-out;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
}
.vertikal-nav ul,
.vertikal-nav ul li ul {
  list-style:none;
  margin:0;
  padding:0;
  display:none;
  position:absolute;
  z-index:999;
  width:100%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.vertikal-nav ul {
  top:0;
  left:100%;
}
.vertikal-nav ul li ul {
  top:1px;
}
.vertical-nav ul li {
  clear:both;
  width:100%;
}
.vertikal-nav ul li a {
  padding:15px 20px;
  text-decoration:none;
  display:inline-block;
  border:0 none;
  float:left;
  clear:both;
}
.vertikal-nav li i {
  line-height:24px !important;
  margin:-15px 14px 0 -19px;
  font-size:25px;
  float:left;
  padding-right:10px;
  padding:16px 15px 12px 15px;
  width:28px;
  text-align:center;
  -o-transition:background .3s ease-in-out;
  -webkit-transition:background .3s ease-in-out;
  -moz-transition:background .3s ease-in-out;
  transition:background .3s ease-in-out;
}
.vertikal-nav.dark,
.vertikal-nav.dark ul,
.vertikal-nav.dark ul li ul {
  background:#222 !important;
}
.red li i:hover {
  background:#e74c3c;
  color:#fff;
}
.red li a:hover {
  color:#e74c3c;
}

3. Selanjutnya, letakkan kode berikut dibawah kode <body>


<div id='sidebar-kiri'>
<ul class='vertikal-nav dark red'>
    <li><a href='/' target='_blank'><i class='icon-home'></i>Beranda</a></li>
    <li><a href='/p/daftar-isi.html' target='_blank'><i class='icon-book'></i>Daftar isi</a></li>
    <li><a href='/p/kontak.html' target='_blank'><i class='icon-phone-sign'></i>Kontak</a></li>
    <li><a href='/p/tentang-saya.html' target='_blank'><i class='icon-user'></i>Tentang saya</a></li>
</ul>
</div>
 
4. Setelah itu, ikon atau thumbnail dari menu bisa anda buat dari gambar. Tetapi, ada yang lebih mudah dari pada membuat gambar sendiri. Yaitu dengan menggunakan font awesome. Font Awesome ini adalah karakter yang penampilannya sudah dirancang sebagai icon atau lambang dari aturan tertentu. Seperti logo dan simbol simbol yang lain. Saya sudah punya CSS dari font awesome ini.
<link href='https://sites.google.com/site/blogjona/files/jonarendra-font-awesome.min.css' rel='stylesheet'/>
HTML diatas letakkan di bawah kode <head>

5. Anda sudah berhasil memasang menu navigasi vertikal dengan icon. Saatnya kita sesuaikan widget ini terhadap blog.

B. Kustomisasi

Pada CSS, kita perlu membuat menu navigasi ini berada di dalam suatu elemen. Disini, #sidebar-kiri yang memiliki peran. Buat elemen ini memiliki posisi melayang / fixed supaya terus menempel dihalaman blog. Apabila tidak, menu navigasi akan tergulung jika halaman blog di scroll.

Jika ingin mengubah warna latar dari #sidebar-kiri, anda juga harus mengubah background .vertikal-nav .dark supaya memiliki warna yang menyatu.

Rangkaian HTML menu navigasi juga perlu anda kustomisasikan. Dengan mengganti
  • URL yang dituju <a href='URL'
  • Ikon / logo menu <i class='NAMA ICON'>
  • Nama link
Apabila anda sudah menggunakan Font Awesome, Cari kode dari icon yang ingin anda pakai di page berikut Daftar Icon Font Awesome.
Perlu diingat, bahwa menu ini bukan dropdown atau tidak memiliki submenu

Sumber :http://jonarendra.blogspot.com/2013/12/Menu.Navigasi.Vertikal.Melayang.Dengan.Icon.html
Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Cara membuat Menu Navigasi Vertikal Melayang Dengan Icon di blog. Anda bisa bookmark halaman ini dengan URL http://bacainfomu.blogspot.com/2014/01/cara-membuat-menu-navigasi-vertikal.html. Terima kasih!
Ditulis oleh: Unknown -

Belum ada komentar untuk "Cara membuat Menu Navigasi Vertikal Melayang Dengan Icon di blog"

Post a Comment

Subscribe to: Post Comments (Atom)