Popular Post

Popular Posts

Posted by : Cyberr Pamekasan Jumat, 14 Juni 2013


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 :
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.


<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(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg)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>

{ 2 komentar... read them below or Comment }

Syarat Berkomentar !!
1.Berkomentarlah dengan bahasa yang baik dan benar .
2.Komentar tidak mengandung SARA,,PELECEHAN,,dan hal2 yang negatif .
3.Tidak boleh menyisipkan link aktif di komentar ini
4.No Spamming

- Copyright © 2013 Cyberr Pamekasan - Devil Survivor 2 - Powered by Blogger - Designed by Johanes Djogan -