Cara Membuat Menu Navigasi Dropdown Melayang (Floating) Pada Blog

Menu navigasi yang saya share kali ini adalah menu navigasi yang akan tetap berada di bagian atas halaman walaupun halaman telah discroll kebawah. Dan juga pada menu navigasi yang saya bagikan ini anda bisa menambah banyak menu dropdown. Untuk lebih jelasnya langsung saja disimak artikel saya ini.

Langkah Pertama

Login ke akun Blogger anda kemudian klik Template -> Edit HTML. Lalu cari kode ]]></b:skin> (gunakan Ctrl + F agar lebih mudah). Setelah itu copy dan paste kode dibawah ini tepat diatas kode ]]></b:skin> yang anda cari tadi.

#lscnav{width:100%;min-
width:1280px;position:fixed;top:0;left:0;right:0;height:34px;font-size:28px;z-index:99;background-color:#666666;border-bottom:1px solid #000;border-right:1px solid #000;border-left:1px solid #000}
#lscwrapper{width: 1280px;height:50px;margin:0 auto;}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#lscmenunav{width: 1280px }
#lscmenunav,#lscmenunav ul{list-style:none;font-family:Yanone Kaffeesatz, serif;margin:0;padding:0;}
#lscmenunav a{display:block;text-decoration:none;font-size:28px;font-weight:700;text-transform:uppercase;color:#fff;padding:8px 8px 8px;border-left:1px solid #000;text-shadow:0 1px 1px #000;}
#lscmenunav a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKQbEkJ9Ls8jwW6Wg9CGDGrpdYikO-T9DqL9S9xrdbzW_vokpSztOvrVofkLz6dY-vmj-vG8ELBh_UfrZdo1UGipngv00mFQlTCWRgJrdsPaFQQveXthehvpl0fjKKdKS3wqdF8cNUPg/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 8px}
#lscmenunav li{float:left;position:static;width:auto}
#lscmenunav li ul,#menubar ul li{width:170px}
#lscmenunav ul li a{text-align:left;color:#fff;font-size:26px;font-weight:400;text-transform:none;font-family:Yanone Kaffeesatz;border:none;padding:5px 10px}
#lscmenunav li ul{z-index:50;position:absolute;display:none;background:#666666;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#lscmenunav li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#000;color:#fff;-webkit-transition: background-color .555s;-moz-transition: background-color .555s;-o-transition: background-color .555s;-ms-transition: background-color .555s;}
#lscmenunav li:hover ul,#menubar li.hvr ul{display:block}
#lscmenunav li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#lscmenunav li ul li.hr{border-bottom:1px solid #433e31;border-top:1px solid #11100d;display:block;font-size:1px;height:0;line-height:0;}
#lscmenunav ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Keterangan:

Jika anda mau kode #666666 boleh anda ganti dengan kode warna lainnya. Kode tersebut berfungsi sebagai warna latar menu navigasi anda nantinya. Untuk melihat kode warna lainnya klik disini.

Setelah itu klik 'Simpan Template'. Langkah pertama telah selesai.

Langkah kedua

Buka Tata Letak -> Tambah Gadget (pada bagian header mana saja) -> HTML/JavaScript.

Kosongkan bagian 'Judul'. Copy dan paste kode kode di bawah ini pada bagian 'Konten'.

<div id='lscnav'><div id='lscwrapper'><ul id='lscmenunav'><li class='Home'><a href='#'><img alt='L3' height='15px' src='https://diogomonica.com/assets/media/home.png' width='28px' height='28px'/></a></li><li><a href='#'>Menu 1</a></li><li><a class='trigger' href='# '>Menu Dropdown 1</a><ul><li><a href='#'>Sub menu 1.1</a></li><li><a href='#'>Sub menu 1.2</a></li>
<li><a href='#'>Sub menu 1.3</a></li>
<li><a href='#'>Sub menu 1.4</a></li></ul></li><li><a class='trigger' href='#'>Menu Dropdown 2</a><ul><li><a href='#'>Sub menu 2.1</a></li><li><a href='#'>Sub menu 2.3</a></li>
<li><a href='#'>Sub menu 2.4</a></li>
<li><a href='#'>Sub menu 2.4</a></li></ul></li><li><a class='trigger' href='#'>Menu Dropdown 3</a><ul><li><a href='#'>Sub menu 3.1</a></li>
<li><a href='#'>Sub menu 3.2</a></li>
<li><a href='#'>Sub menu 3.3</a></li>
<li><a href='#'>Sub menu 3.4</a></li></ul></li><li><a class='trigger' href='#'>Menu Dropdown 4</a><ul><li><a href='#'>Sub menu 4.1</a></li>
<li><a href='#'>Sub menu 4.2</a></li>
<li><a href='#'>Sub menu 4.3</a></li>
<li><a href='#'>Sub menu 4.4</a></li></ul></li><li><a class='trigger' href='#'>Menu Dropdown 5</a><ul><li><a href='#'>Sub menu 5.1</a></li>
<li><a href='#'>Sub menu 5.2</a></li>
<li><a href='#'>Sub menu 5.3</a></li>
<li><a href='#'>Sub menu 5.4</a></li></ul></li><li><a class='trigger' href='#'>Menu Dropdown 6</a><ul><li><a href='#'>Sub menu 3.1</a></li>
<li><a href='#'>Sub menu 3.2</a></li>
<li><a href='#'>Sub menu 3.3</a></li>
<li><a href='#'>Sub menu 3.4</a></li></ul></li><li><a href='#'>Menu 2</a></li>
</li><li><a href='#'>Menu 3</a></li></ul><br class='clearit'/></div></div>

Keterangan:

Jika anda ingin mengganti gambar home maka ganti URL https://diogomonica.com/assets/media/home.png dengan URL gambar yang anda inginkan. Anda bisa mendapatkan nyan di Kumpulan Gambar/Icon Tombol Home Cocok untuk Menu pada Blog
Ganti # dengan URL menu yang anda inginkan.
Ganti Menu 1, Menu Dropdown 1, Sub menu 1.1 dan seterusnya dengan kata yang anda inginkan.

Cukup demikian yang dapat saya berikan kali ini. Lebih dan kurang saya mohon maaf, dan selamat nge-blog!

Sumber

[@PutraPhoenna_Z]

Apabila anda merasa artikel ini menarik, silahkan berikan komentar anda dibawah.