Cara Mudah Membuat Menu Navigasi Horizontal Melayang Dengan CSS Cara Mudah Membuat Menu Navigasi Horizontal Melayang Dengan CSS

Membuat Menu Navigasi Horizontal Melayang Dengan CSS - Pada kesempatan kali ini saya akan share tentang cara membuat menu navigasi horizontal melayang dengan CSS. Menu navigasi horizontal melayang ini terbilang unik dan elegant. Selain tampilannya yang berbeda dengan menu-menu navigasi pada umumnya dan memang sangat indah, menu ini juga fast loading (ringan) sehingga tidak membebani bobot loading blog anda. Kita bisa membuat menu navigasi horizontal melayang ini dengan menggunakan CSS.

Silahkan anda bisa ikuti langkah-langkah di bawah ini jika berminat untuk membuat menu navigasi horizontal melayang seperti yang terlihat pada gambar di atas.

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "HTML/JavaScript".

5. Lalu masukkan script kode berikut ini :

<style type="text/css">
#kucopas ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#kucopas li .current{color: transparant;}#kucopas li a:hover, #kucopas li a:active {background: #009900; background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff; margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#kucopas {width: auto;float: left;margin: 0;padding: 0;}#kucopas {margin: 0;padding: 0;}#kucopas ul {float: left;list-style: none;margin: 0;padding: 0;}#kucopas li {list-style: none;margin: 0;padding: 0;}#kucopas li a, #kucopas li a:link, #kucopas li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#kucopas li a:hover, #kucopas li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#kucopas li li a, #kucopas li li a:link, #kucopas li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#kucopas li li a:hover, #kucopas li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#kucopas li {float: left;padding: 0;}#kucopas li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#kucopas li ul a {width: 140px;}#kucopas li ul ul {margin: -32px 0 0 171px;}#kucopas li:hover ul ul, #kucopas li:hover ul ul ul, #kucopas li.sfhover ul ul, #kucopas  li.sfhover ul ul ul {left: -999em;}#kucopas  li:hover ul, #kucopas  li li:hover ul, #kucopas  li li li:hover ul, #kucopas  li.sfhover ul, #kucopas  li li.sfhover ul, #kucopas  li li li.sfhover ul {left: auto;}#kucopas  li:hover, #kucopas  li.sfhover {position: static;}#footer-column-divide {clear:both;}#kucopas{font-family:Comic Sans Ms;background:#000  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikPwzY5jjkDc3GXa4L18fRbTM0l5wHBYlgOcGiky4Au8Mm_S6gHYDJD1TfkAYnnsvY_vFIbCD1_8Y1xTmBPsDmsCPYNTjG1a77wquGQIGkZALnlZU7eflHdJlpiOk-slb7YtjLS7ytEkja/)repeat-x;(0,0,0, 0.80);border: 0; padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>

<div id='kucopas'>
<ul id='kucopas'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Tutorial Blog</a>
<ul class='children'>
<li><a href='#'>Download Aplikasi</a></li>
<li><a href='#'>Download Game</a></li>
<li><a href='#'>Download Icon</a></li>
<li><a href='#'>Download MP3</a></li>
<li><a href='#'>Download Software</a></li>
<li><a href='#'>Download Template</a></li>
</ul>
</li>
<li><a href='#'>About Me</a>
<ul class='children'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Google+</a></li>
</ul>
</li>
<li><a href='#'>Tips And Triks</a>
<ul class='children'>
<li><a href='#'>Tips Blogger</a></li>
<li><a href='#'>Trik Facebook</a></li>
<li><a href='#'>Trik Handpone</a></li>
<li><a href='#'>Ngeposta Menu</a></li>
</ul>
</li>
<li><a href='#'>Tutorial Blog</a>
<ul class='children' target='_blank'>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Tutorial SEO</a></li>
</ul>
</li>
<li><a href='#'>Tv Online</a>
<ul class='children'>
<li><a href='#' target='_blank'>INDOSIAR</a></li>
<li><a href='#' target='_blank'>RCTI</a></li>
</ul>
</li>
<li><a href='#'>Tukar Link Blog</a></li>
<li><a href='http://ngeposta.blogspot.com/' target='blank'>Ngeposta Blog</a></li>
</ul>
</div>

6. Klik save/simpan, selesai dan lihat hasilnya...

Note :
Ganti tanda # dengan alamar url (link) tujuan, dan sesuaikan teks atau tulisan yang ada di sampingnya.

Cukup sekian tutorial tentang cara membuat menu navigasi horizontal melayangdengan CSS ini. Semoga bermanfaat bagi anda, dan selebihnya saya mohon ma'af atas segala kekurangan yang ada.