Hay friends, Dengerin lagu yuks
Hehehehe ..
Andyrra

Male, 45 years

Batam, Indonesia

If you're doing your best, you won't have any time to worry about failure and The past can't see you, but the future is listening.

andyrra.com

Translate

Java Filipino Czech English iran Romania Thailand Bangladesh India India French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

poto

Mounting created Bloggif

9 Mei 2013

Navigasi melayang

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.
jika berminat untuk membuat menu navigasi horizontal melayang seperti yang terlihat pada gambar di atas.
Silahkan ikuti langkah -langkah bertikut :
1. Login ke blogger kamu.
2. Tata letak
3. Tambah Gadget.
4. Pilih HTML/Javascript
5. Copy kode di bawah ini dan Letakkan di dalamnya.

<style type="text/css"> #kumpulsuka 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;}#kumpulsuka li .current{color: transparant;}#kumpulsuka li a:hover, #kumpulsuka 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;}#kumpulsuka {width: auto;float: left;margin: 0;padding: 0;}#kumpulsuka {margin: 0;padding: 0;}#kumpulsuka ul {float: left;list-style: none;margin: 0;padding: 0;}#kumpulsuka li {list-style: none;margin: 0;padding: 0;}#kumpulsuka li a, #kumpulsuka li a:link, #kumpulsuka li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#kumpulsuka li a:hover, #kumpulsuka li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#kumpulsuka li li a, #kumpulsuka li li a:link, #kumpulsuka 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;}#kumpulsuka li li a:hover, #kumpulsuka 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;}#kumpulsuka li {float: left;padding: 0;}#kumpulsuka li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#kumpulsuka li ul a {width: 140px;}#kumpulsuka li ul ul {margin: -32px 0 0 171px;}#kumpulsuka li:hover ul ul, #kumpulsuka li:hover ul ul ul, #kumpulsuka li.sfhover ul ul, #kumpulsuka li.sfhover ul ul ul {left: -999em;}#kumpulsuka li:hover ul, #kumpulsuka li li:hover ul, #kumpulsuka li li li:hover ul, #kumpulsuka li.sfhover ul, #kumpulsuka li li.sfhover ul, #kumpulsuka li li li.sfhover ul {left: auto;}#kumpulsuka li:hover, #kumpulsuka li.sfhover {position: static;}#footer-column-divide {clear:both;}#kumpulsuka{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='kumpulsuka'> <ul id='kumpulsuka'> <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='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> </ul> </li> <li><a href='#'>About Me</a> <ul class='children'> <li><a href='#'>Facebook</a></li> <li><a href='#'>Tweeter</a></li> <li><a href='#'>Google+</a></li> </ul> </li> <li><a href='#'>Tips And Triks</a> <ul class='children'> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> </ul> </li> <li><a href='#'>Tutorial Blog</a> <ul class='children' target='_blank'> <li><a href='#'>Null</a></li> <li><a href='#'>Null</a></li> </ul> </li> <li><a href='#'>kumpulsuka</a> <ul class='children'> <li><a href='#' target='_blank'>Null</a></li> <li><a href='#' target='_blank'>Null</a></li> </ul> </li> <li><a href='#'>xxx</a></li> </ul> </div>
6. Simpan dan lihat hasilnya...

Note :
Ganti tanda # dengan alamar URL tujuan kamu, dan sesuaikan teks atau tulisan yang ada di sampingnya.

Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.

Get free daily email updates!

Follow us!



Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

0   komentar

Cancel Reply

Led


copas gif

loading

SOCIAL NETWORK

email  
   
 
google plusGoogle+
 
  youtube 
 
andyrra.com

VISITOR FROM

andyrra.com

RECENT POST



>

Enter your email address:



what is my ip address?