Cara Membuat Menu Horizontal Melayang Di Blogger

Cara Membuat Menu Horizontal Melayang- Kali ini saya akan berbagi tips untuk mempercantik Blog, yaitu Cara Membuat Menu Horizontal Melayang, pastinya keren donk! lihat gambar di bawah ini

Gimana mau ga, kalau mau aku kasih nih hehehe, ok cukup deh basabasinya ini dia.

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/AVvXsEheaOGNObmcosJus1sXPBow1GQqz68WIT5BOExKbAkQX-pfitgNYTZiO9HuiXd2Hg86LDgHfzk4Of817bJfotBkoS64CCAHMPUoLTpDAsrPaButpYb4_2B7X1BmSRsMrecstkgcRkToDmSE/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/AVvXsEheaOGNObmcosJus1sXPBow1GQqz68WIT5BOExKbAkQX-pfitgNYTZiO9HuiXd2Hg86LDgHfzk4Of817bJfotBkoS64CCAHMPUoLTpDAsrPaButpYb4_2B7X1BmSRsMrecstkgcRkToDmSE/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/AVvXsEi7p6BQ0CtTQptoLEyNVRGsAs8T52thDIq5XsvRHjPu9RVcv-iripg7pPfmd8NHYK_C79DkMvAHAI2ih97SMY9Ap6qAnuVgvAbcL7PtzA6lGTExrm4wL6no-4wnXTWbLopsAkHAMw1k2ywp/)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://aplikasiterunik.blogspot.com'>Home</a></li>
<li><a href='http://aplikasiterunik.blogspot.com/2012/01/daftar-isi-versi-2.html' target='_blank'>Daftar Isi</a>
<ul class='children'>
<li><a href='http://aplikasiterunik.blogspot.com/2011/12/daftar-isi.html' target='_blank'>Daftar Isi 1</a></li>
<li><a href='http://aplikasiterunik.blogspot.com/2012/01/daftar-isi-versi-2.html' target='_blank'>Daftar Isi 2</a></li>
</ul>
</li>
<li><a href='http://aplikasiterunik.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://aplikasiterunik.blogspot.com/2011/12/conatct-us.html'>Contact Us</a></li>
<li><a href='http://aplikasiterunik.blogspot.com/2012/01/tukat-link.html'' target='_blank'><blink>Tukar Link</blink></a></li>
<li><a href='http://aplikasiterunik.blogspot.com/2012/01/link-teman.html' title='htc' target='_blank'><blink>Link Teman</blink></a></li>
<li><a href='http://aplikasiterunik.blogspot.com/2011/12/about.html' title='htc' target='_blank'><blink>About</blink></a></li>
</ul>
</div>

Widget By http://tejahtc.blogspot.com 

Ganti yang berwarna BIRU sesuai dengan Nama Yang Kamu Inginkan, terserah deh,
Ganti yg berwarna merah dengan target alamat URL nya.
Contah : <a href="http://aplikasiterunik.blogspot.com/2011/12/daftar-isi.html">Daftar Isi</a>|

Cukup sekian penjelasan dari saya, bila ada yang kurang paham dan ada kode yang salah silahkan tinggalkan pesan di kotak komentar.