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/AVvXsEhulEvgpGqLyZpAlCUEg7MIGXQWS1G-5KVd3NCOIYZGuiSRnyL8S8ZNj01mqXvRQ90K5EoGYroFQkIOQVNFiSU1WmyWhChHoBsE00lsEDf4slTwSDZwcBrx2OX6jVSbu1qNo_QciMyDI5tI/)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='#'>Seputar Ketramilan 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://seputarketrampilan.blogspot.com/' target='blank'>Seputar Ketramilan 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.
Special thanks to bagong-kewez. Salam sejahtera by Seputar Ketramilan...
