FBACKLINK
Tuesday, 24 December 2013

Buat Menu Horizontal melayang tanpa edit html

Hi sobat gk punya waktu lama nih langsung ke tkp ajah, sebelum itu lihat dulu screenshot dibawah ini!
Buat Menu Horizontal melayang tanpa edit html
  • Pertama Buka Blogger
  • Lalu masuk ke Layout blog sobat 
  • Pilih add element/ Tambah Element
  • Pilih HTML/Javascript
  • Lalu masukan kode ini
<style type="text/css">
#fbmenu 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;}#fbmenu li .current{color: transparant;}#fbmenu li a:hover, #fbmenu li a:active {background: #4B0082;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;}#fbmenu {width: auto;float: left;margin: 0;padding: 0;}#fbmenu {margin: 0;padding: 0;}#fbmenu ul {float: left;list-style: none;margin: 0;padding: 0;}#fbmenu li {list-style: none;margin: 0;padding: 0;}#fbmenu li a, #fbmenu li a:link, #fbmenu li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#fbmenu li a:hover, #fbmenu li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#fbmenu li li a, #fbmenu li li a:link, #fbmenu 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;}#fbmenu li li a:hover, #fbmenu 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;}#fbmenu li {float: left;padding: 0;}#fbmenu li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#fbmenu li ul a {width: 140px;}#fbmenu li ul ul {margin: -32px 0 0 171px;}#fbmenu li:hover ul ul, #fbmenu li:hover ul ul ul, #fbmenu li.sfhover ul ul, #fbmenu  li.sfhover ul ul ul {left: -999em;}#fbmenu  li:hover ul, #fbmenu  li li:hover ul, #fbmenu  li li li:hover ul, #fbmenu  li.sfhover ul, #fbmenu  li li.sfhover ul, #fbmenu  li li li.sfhover ul {left: auto;}#fbmenu  li:hover, #fbmenu  li.sfhover {position: static;}#footer-column-divide {clear:both;}#fbmenu{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: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='fbmenu'>
<ul id='fbmenu'>
<li><a href='http://fbacklink.blogspot.com/'>Home</a></li>
<li><a href='http://fbacklink.blogspot.com/' target='_blank'>Daftar Isi</a></li>
<li><a href='http://fbacklink.blogspot.com/' target='_blank'>Download</a>
<ul class='children'>
<li><a href='Disini letak link sobat' target='_blank'>sub menu</a></li>
<li><a href='Disini letak link sobat' target='_blank'>sub menu</a></li>
</ul>
</li>
<li><a href='Disini letak link sobat' target='_blank'>menu</a></li>
</ul>
</div>
  • Simpan 
Note
Ganti kode yang berwarna merah dengan url sobat
Ganti kode yang berwarna orange dengan judul sobat

Sampai kita bertemu di posting selanjutnya

8 komentar

Wew ane baru tau kalo bisa bikin menu tanpa edit HTML, ini memudahkan pemain blogger pemula gan salah satunya adalah saya

Makasih gan, sangant membantu ^_^

ikut nyimak dulu kang,thanks udah share..

www.apkprime.com

.. mantep nieh triknýa gan, izin praktek ya. . . .

Jangan menggunakan link hidup
Jangan menggunakan kata kata Spam, SARA, OOT, dsb
Berkomentarlah sesuai Topik
Jika tidak mengikuti peraturan diatas maka akan saya anggap SPAM
Silakan komen , No Moderation but you get backlink