Latest News :

Home » » Cara Membuat Horizontal menu Melayang

Cara Membuat Horizontal menu Melayang

Jumat, 31 Agustus 2012 | 0 komentar


Follow Step By Step.
  • Login ke Blog kamu.
  • Pilih Tata Letak
  • Pilih Add Gadget
  • Pilih HTML/JAVA SCRIPT
  • Masukan Script di bawah ini.
<style type="text/css">
#msuteja 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;}#msuteja li .current{color: transparant;}#msuteja li a:hover, #msuteja li a:active {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEVCEI3SGxXC1L7MhMbuzK1cGnNNrdADz5_887XrQLSiFh2xThLBiZH4dtkJNTpfZSykBOQCfKahqO-TtzyyVSTMzt6Q4f6dOvLSdWTCjtblvmJ7LPpJ51ptq12jMPBiRXsiKeF0Fp1CP/s1600/background-judul-posting.gif);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;}#msuteja {width: auto;float: left;margin: 0;padding: 0;}#msuteja {margin: 0;padding: 0;}#msuteja ul {float: left;list-style: none;margin: 0;padding: 0;}#msuteja li {list-style: none;margin: 0;padding: 0;}#msuteja li a, #msuteja li a:link, #msuteja li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#msuteja li a:hover, #msuteja li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#msuteja li li a, #msuteja li li a:link, #msuteja li li a:visited {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEVCEI3SGxXC1L7MhMbuzK1cGnNNrdADz5_887XrQLSiFh2xThLBiZH4dtkJNTpfZSykBOQCfKahqO-TtzyyVSTMzt6Q4f6dOvLSdWTCjtblvmJ7LPpJ51ptq12jMPBiRXsiKeF0Fp1CP/s1600/background-judul-posting.gif);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;}#msuteja li li a:hover, #msuteja 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;}#msuteja li {float: left;padding: 0;}#msuteja li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#msuteja li ul a {width: 140px;}#msuteja li ul ul {margin: -32px 0 0 171px;}#msuteja li:hover ul ul, #msuteja li:hover ul ul ul, #msuteja li.sfhover ul ul, #msuteja li.sfhover ul ul ul {left: -999em;}#msuteja li:hover ul, #msuteja li li:hover ul, #msuteja li li li:hover ul, #msuteja li.sfhover ul, #msuteja li li.sfhover ul, #msuteja li li li.sfhover ul {left: auto;}#msuteja li:hover, #msuteja li.sfhover {position: static;}#footer-column-divide {clear:both;}#msuteja{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt60SAuDPTiFUyOdtZTz4SaSK32PbhmEhckV61oEpAMVDXHhhUVwLMgqiWvWM94xRQIgcKSX0jc5BTqO3Uli7IcstNdLPcLoMQdG27foy_z_yW6JfYyzPeXN62TWlEulOkyB-slnwD7SzF/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;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='msuteja'>
<ul id='msuteja'>
<li><a href='http://blazerracing.blogspot.com'>Home</a></li>
<li><a href='http://blazerracing.blogspot.com/2012/01/daftar-isi-versi-2.html' target='_blank'>Daftar Isi</a>
<ul class='children'>
<li><a href='http://blazerracing.blogspot.com/2011/12/daftar-isi.html' target='_blank'>Daftar Isi 1</a></li>
<li><a href='http://blazerracing.blogspot.com/2012/01/daftar-isi-versi-2.html' target='_blank'>Daftar Isi 2</a></li>
</ul>
</li>
<li><a href='http://blazerracing.blogspot.com/' target='_blank'>Follow Us</a>
<ul class='children'>
<li><a href='http://www.facebook.com/pages/blazer-blog/193419544081467' target='_blank'>Facebook</a></li>
<li><a href='https://twitter.com/#!/eclipspain' target='_blank'>Twitter</a></li>
</ul>
</li>
<li><a href='http://blazerracing.blogspot.com/2011/12/conatct-us.html'>Contact Us</a></li>
<li><a href='http://blazerracing.blogspot.com/2012/01/tukat-link.html'' target='_blank'><blink>Tukar Link</blink></a></li>
<li><a href='http://blazerracing.blogspot.com/2012/01/link-teman.html' title='htc' target='_blank'><blink>Link Teman</blink></a></li>
<li><a href='http://blazerracing.blogspot.com/2011/12/about.html' title='htc' target='_blank'><blink>About</blink></a></li>
</ul>
</div>
Ganti yang berwarna BIRU sesuai dengan Nama Yang Kamu Inginkan, terserah deh,
Ganti yg berwarna merah dengan target alamat URL nya.


sumber
Share this article :
 
Support : Creating Website
Copyright © 2011. Nicko Part III - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger