Cara membuat menu navigasi horizontal dropdown keren di blog

By: Johan Supriyanto, S.Kom. -
Pada artikel sebelumnya saya telah berbagi ilmu tentang bagaimana cara memodifikasi footer blog supaya menjadi lebih elegan dan pada artikel kali ini saya akan berbagi ilmu tentang Cara membuat menu navigasi horizontal dropdown keren di blog.Seperti pada contoh gambar di bawah ini.

Bagaimana menurut anda? apakah anda tertarik untuk membuatnya ? Nah jika tertarik langsung saja simak penjelasan berikut ini:.
1.) Anda login atau masuk ke akun blogger anda
2.) Setelah itu Masuk ke Dashboard > Template > Edit Html > Lanjutkan
3.) Beri centang tanda 
4.) Kemudian cari kode ]]></b:skin> caranya tekan tombol Ctrl dan F lalu ketik ]]></b:skin>
5.) Kalau sudah ketemu kode ]]></b:skin>, masukkan kode berikut ini diatas kode ]]></b:skin>
Kode
menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
6.) Kemudian Simpan Template
7.) Selanjutnya anda buka Tata Letak > Tambah Gadget > Html/Javascript
8.) Dan masukkanlah kode berikut ini pada kotak isian yang lebar
<div class="menu"><ul><li><a href="http://temukancara.blogspot.com"> Beranda </a></li><li><a href="http://temukancara.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Software </a></li><li><a href="# "> Hardware </a></li><li><a href=" # "> Internet </a></li><li><a href="# "> Hardware </a></li></ul></li><li><a href="#">Blogger</a><ul><li><a href="#"> Tutorial Blog  </a></li><li><a href="#"> Tips & Trik </a></li></ul></li><li><a href="#"> About Me </a></li></ul></div>
9.) Ubah # dengan URL yang akan dituju
Ubah Menu Link dengan nama yang akan ditampilkan dalam menu utama.
Ubah Sub-menu Link dengan nama yang akan menjadi menu yang berada di bawah menu utama
12.) Kemdudian Simpan dan lihat hasilnya

 Contoh :

 <div class="menu"><ul><li><a href="http://temukancara.blogspot.com"> Beranda </a></li><li><a href="http://temukancara.blogspot.com/trick "> Komputer</a><ul><li><a href=" # "> Software </a></li><li><a href="# "> Hardware </a></li><li><a href=" # "> Internet </a></li><li><a href="# "> Hacker </a></li></ul></li><li><a href="#"> Blogger </a><ul><li><a href="#"> Tutorial Blog </a></li><li><a href="#">Tips & Trik </a></li></ul></li><li><a href="#"> About Me</a></li></ul></div>

 ( Untuk pengeditan kode, hanya edit kode yang bertulis tebal saja)

 -----------------------------------------------------------------------------------------------
UNTUK EDIT MODE :

Code Membuat Single Menu :
Lihat pada bagian kode Beranda : 
<li><a href="http:/temukancara.blogspot.com"> Beranda </a></li>
Kode ini merupakan single menu, artinya tidak ada sub-menu yang mengikuti dibawahnya. Kode ini sangat sederhana, dimulai dengan kode <li>  dan diakhiri kode </li> dan jika anda perlu menambah single menu, tinggal tambah kode diatas setelah kode </li>, contoh :
<li><a href="http://temukancara.blogspot.com"> Beranda </a></li><li><a href="http://temukancara.blogspot.com"> Daftar Isi </a></li>

 Sehingga akan tampil 2 single menu yang saling bersebelahan yaitu Beranda dan daftar isi


Code Membuat Sub-Menu :

<li><a href="http://temukancara.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Software </a></li><li><a href="# "> Hardware </a></li><li><a href=" # "> Internet </a></li><li><a href="# "> Hacker </a></li></ul></li>
Pada kode diatas, Temukan cara  menggunakan sistem sub-menu, artinya menu yang mempunyai cabang. Trik komputer merupakan induknya, sementara Software, Hardware, Hacker, Internet sebagai anaknya yang mengikuti di bawahnya.Software, Hardware, Hacker, Internet tidak tampil pada menu utama, melainkan menu itu akan tampil jika kita menyorot menu Trik Komputer. pada saat membuat sub-menu, ada beberapa hal yang perlu diperhatikan, diantaranya kode <ul> dan </ul> . Pada saat membuat sub-menu , anda perlu menambahkan kode <ul> setelah kode </a> di kode induk, sementara penutup kode induk </li> berada di akhir kode.

 Sebagai contoh sub-menu 1 induk 1 anak ( perhatikan kode bertulis tebal ):<li><a href="http://temukancara.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Software </a></li></ul></li>

 Jika anda ingin menambahkan sub-menu lagi, tambahkan kode <li><a href=" # "> Sub-Menu Link </a></li> sebelum kode </ul> berada
contoh
<li><a href="http://temukancara.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Software</a></li><li><a href=" # "> Hardware </a></li></ul></li>

 Sehingga akan tampil 2 sub menu yang berada dibawah menu Trik komputer, yaitu Software dan Hardware

Demikian artikel tentang Cara membuat menu navigasi horizontal dropdown keren di blog, Semoga artikel diatas dapat bermanfaat buat anda yang sedang belajar membuat menu navigasi. Jika ada cara-cara yang lain bisa menambahkan pada kotak komentar.

Komentar

Posting Komentar