Contoh Menu Horizontal Melayang
Gambar
di atas adalah contoh Menu Horizontal Melayang, walaupun sobat menuju
ke bagian paling bawah halaman blog, Menu Horizontal Melayang itu akan
selalu setia mengikuti sobat dan selalu berada di bagian atas, ckckck...
Setia tambah romantis aja . . .Oke dah sekarang kita akan membahas cara memasnganya di blog sobat, cara pemasangannya sangatlah mudah sob, ya . . . mudah bangetz gitu lho . . .
Udah kita lansung aja ya . . .
Cara Membuat Menu Horizontal Melayang:
1. Login ke akun blogger sobat.
2. Pada menu klick Rancangan ➨ Tambah Gadget(saya sarankan di bagian paling bawah dan jangan di beri judul) ➨ Lalu pilih HTML/Java Script.
3. Selanjutnya copy kode berikut dan paste atau letakkan di dalam gadget HTML/Java Script tadi.
<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/AVvXsEj_XUwYrzcudF18QskJuYuZecdj8ndxNay2EjcmWWsHl67mSkVBwh0g0L4frMNMiPHktuAZVXt-vwsaljBL7cEUaepUb6oZLXTyUh2EN3D3_xb0xw5BkYQtMg54hvxl-hUB6xOi-jLcElke/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/AVvXsEj_XUwYrzcudF18QskJuYuZecdj8ndxNay2EjcmWWsHl67mSkVBwh0g0L4frMNMiPHktuAZVXt-vwsaljBL7cEUaepUb6oZLXTyUh2EN3D3_xb0xw5BkYQtMg54hvxl-hUB6xOi-jLcElke/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/AVvXsEgaJCdQP_3-O2NFK2E3Om2LX5538VelZd_qNfg4J5ua-1zUu7Iag3gQV8D8vkg6Z34r__CBKS2frXzZqvzJ0wWg3Goq5UweY77Ch8hsIpxZaoqe_9ip_QCFQiqLPXjXAEVxX3xsFK5EeEbU/)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='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul class='children'>
<li><a href='#' target='_blank'>Menu 2.1</a></li>
<li><a href= '#'target='_blank'>Menu 2.2</a></li>
</ul>
</li>
<li><a href='#' target='_blank'>Menu 3</a>
<ul class='children'>
<li><a href='#' target='_blank'>Menu 3.1</a></li>
<li><a href='#' target='_blank'>Menu 3.2</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'' target='_blank'><blink>Menu 5</blink></a></li>
<li><a href='#' target='_blank'><blink>Menu 6</blink></a></li>
<li><a href='#' target='_blank'><blink>Menu 7</blink></a></li>
</ul>
</div>
#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/AVvXsEj_XUwYrzcudF18QskJuYuZecdj8ndxNay2EjcmWWsHl67mSkVBwh0g0L4frMNMiPHktuAZVXt-vwsaljBL7cEUaepUb6oZLXTyUh2EN3D3_xb0xw5BkYQtMg54hvxl-hUB6xOi-jLcElke/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/AVvXsEj_XUwYrzcudF18QskJuYuZecdj8ndxNay2EjcmWWsHl67mSkVBwh0g0L4frMNMiPHktuAZVXt-vwsaljBL7cEUaepUb6oZLXTyUh2EN3D3_xb0xw5BkYQtMg54hvxl-hUB6xOi-jLcElke/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/AVvXsEgaJCdQP_3-O2NFK2E3Om2LX5538VelZd_qNfg4J5ua-1zUu7Iag3gQV8D8vkg6Z34r__CBKS2frXzZqvzJ0wWg3Goq5UweY77Ch8hsIpxZaoqe_9ip_QCFQiqLPXjXAEVxX3xsFK5EeEbU/)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='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul class='children'>
<li><a href='#' target='_blank'>Menu 2.1</a></li>
<li><a href= '#'target='_blank'>Menu 2.2</a></li>
</ul>
</li>
<li><a href='#' target='_blank'>Menu 3</a>
<ul class='children'>
<li><a href='#' target='_blank'>Menu 3.1</a></li>
<li><a href='#' target='_blank'>Menu 3.2</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'' target='_blank'><blink>Menu 5</blink></a></li>
<li><a href='#' target='_blank'><blink>Menu 6</blink></a></li>
<li><a href='#' target='_blank'><blink>Menu 7</blink></a></li>
</ul>
</div>
4. Simpan.
Sekarang sobat bisa lihat sendiri hasilnya.
Keterangan:
- Sobat ganti tanda # dengan url tujuan.
- Ganti Menu dengan nama tujuan url.
Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas! Description: Cara Membuat Menu Horizontal Melayang Rating: 4.5 Reviewer: dek rif ItemReviewed: Cara Membuat Menu Horizontal Melayang
sumber info :
http://otowebsite.blogspot.com/2012/05/cara-membuat-menu-horizontal-melayang.html/