13.05
Cara Membuat Menu Navigasi Horizontal Melayang
Cara Membuat Menu Navigasi Horizontal Melayang - Kali ini saya akan bagikan tutorial tentang bagaimana cara membuat menu navigasi melayang, ini adalah salah satu dari sekian banyak menu yang dibagikan banyak blogger dengan fitur menu melayang. Untuk tampilannya kurang lebih sama persis dengan gambar di samping.
Menu navigasi horizontal melayang ini terbilang minimalis namun tetap indah dipandang, menu ini juga ringan, sehingga tidak membebani bobot blog anda. Menu navigasi melayang ini juga dilengkapi dengan fitur search dan simbol home, Cara Membuat Menu Navigasi Horizontal Melayang ini juga lumayan mudah, anda tinggal ikuti saja langkah langkah dibawah ini. jika memang berminat untuk membuat menu navigasi horizontal melayang seperti yang terlihat pada gambar di atas.
Cara Membuat Menu Navigasi Horizontal Melayang :
- Pertama anda masuk dulu ke akun www.blogger.com anda
- Masuk ke pengaturan template -> edit HTML -> jangan lupa centang terlebih dahulu expand template widget nya.
- Cari code ]]></b:skin> lalu letakkan code di bawah ini tepat diatas code ]]></b:skin> untuk mempermudah pencarian anda cukup tekan di keyboard Ctrl-F lalu ketikan ]]></b:skin> :
#navbar-iframe { height:0px; visibility: hidden; display: none;}
Keterangan :
Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.
- Sisipkan kode di bawah ini di atas kode ]]></b:skin> tadi.
.bilah-menu-atas{width:100%;min-width:960px;position:fixed;top:0;left:0;right:0;height:300x;font-size:13px;z-index:99;white-space:nowrap;background-color:#369;background-image:0 0 #369 100%;box-shadow:0 2px 0 #0e5a8c;border-bottom:1px solid rgba(255,255,255,0.1)}.kolom-utama{-moz-transition:all .2s linear 0;width:960px;height:auto;margin:0 auto}.kolom-menu{width:521px;height:auto;float:left;display:inline;margin:0 0 0 -41px}.kolom-menu ul{height:auto;margin-top:0}.kolom-menu ul li{float:left;position:relative;list-style:none outside none}.kolom-menu ul li:first-child{border-left:1px solid rgba(30,30,30,0.125)}.kolom-menu ul li a{color:#fff;font-weight:700;text-shadow:-1px -1px rgba(0,0,0,0.2);text-decoration:none;display:inline-block;position:relative;border-right:1px solid rgba(30,30,30,0.125);box-shadow:1px 0 0 rgba(255,255,255,0.1);padding:5px 10px}.kolom-menu ul li a:hover,.kolom-menu ul li a:focus{background-color:rgba(255,255,255,0.125)}.menusearch{width:200px;float:right;margin:0 auto;padding:0}.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#eee;width:200px;height:23px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #021427;box-shadow:0 0 5px 0 #666 inset;}.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 195px;height:23px;border:0px;outline: none;line-height:23px;}.searchform .searchbutton {border:none;margin:0;padding:0;font-size:12px;height:23px;width:23px;}Keterangan :
Silahkan Anda bisa sesuaikan sendiri apabila ingin merubah warna atau pun ukurannya. Saya yakin anda pasti sudah tau caranya.
- Langkah selanjutnya Cara Membuat Menu Navigasi Horizontal Melayang yaitu dengan mencari kode seperti dibawah ini.
<div id='header-wrapper'>
Keterangan :
Apabila tidak terdapati kode seperti di atas anda bisa cari kode ini <header>
- Setelah itu sisipkan kode dibawah ini Tepat diatas kode <div id='header-wrapper'> atau <header>tadi, pilih salah satu di antara kode tersebut.
<div class='bilah-menu-atas' id='bilahmenuatas'><div class='kolom-utama'><div class='kolom-menu'><ul><li><a href='#'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRQeRaKcZ89p_Kw-tKFkdefIa1tx0wTCULYlboArCcQWZLSG5hdjOqklqx8I66pas_IPkN2-9ivRftjsZR7B7u8K8GAiApIiRDw6DkxT2rkfBk7Wb1ktv5emJNhk9TPzvoVjBro2q-ROo/s800/Beranda.png' style='height:15px; width:20px' title='Home'/></a></li><li><a href='#'>Menu 1</a></li><li><a href='#'>Menu 2</a></li><li><a href='#'>Menu 3</a></li><li><a href='#'>Menu 4</a></li><li><a href='#' target='_blank'>Menu 5</a></li></ul></div><div class='kolom-menu'><ul style='float: right'><li><div class='menusearch'><div style='float:right;padding:2px 8px 0 0;'><form action='/search' class='searchform' method='get'><input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here....'/></form></div></div></li></ul></div></div></div>
Keterangan :
Silahkan anda cukup mengganti tanda # denga link yang anda kehendaki
- Setelah Melakukan Langkah langkah di atas . Sekarang Tinggal Langkah Terakhir Anda, yaitu Mengecek Hasilnya Pada Blog Anda.
- Apabila tidak terjadi kesalahan, Silahkan disimpan, dan Cara Membuat Menu Navigasi Horizontal Melayangpun selesai.
Sekian - Cara Membuat Menu Navigasi Horizontal Melayang
Semoga Tutorial Cara Membuat Menu Navigasi Horizontal Melayang ini Bermanfaat Untuk Kalian.
