Membuat Menu Bar Melayang Pada Blog

Kali ini saya akan membahas cara membuat menubar pada blog atau website, terimakasih buat Cheat Ninja Saga telah merequest ini. supaya tidak panjang lebar mari saya ajarkan

Tutorial :

• Login ke kakun blogger anda
• pilih rancangan
• pilih tambah gadget

masukan script ini :

<style type="text/css"> </blockquote><blockquote class="tr_bq">#japmenu 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;}#japmenu li .current{color: transparant;}#japmenu li a:hover, #japmenu 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;}#japmenu {width: auto;float: left;margin: 0;padding: 0;}#japmenu {margin: 0;padding: 0;}#japmenu ul {float: left;list-style: none;margin: 0;padding: 0;}#japmenu li {list-style: none;margin: 0;padding: 0;}#japmenu li a, #japmenu li a:link, #japmenu li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#japmenu li a:hover, #japmenu li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#japmenu li li a, #japmenu li li a:link, #japmenu 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;}#japmenu li li a:hover, #japmenu 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;}#japmenu li {float: left;padding: 0;}#japmenu li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#japmenu li ul a {width: 140px;}#japmenu li ul ul {margin: -32px 0 0 171px;}#japmenu li:hover ul ul, #japmenu li:hover ul ul ul, #japmenu li.sfhover ul ul, #japmenu li.sfhover ul ul ul {left: -999em;}#japmenu li:hover ul, #japmenu li li:hover ul, #japmenu li li li:hover ul, #japmenu li.sfhover ul, #japmenu li li.sfhover ul, #japmenu li li li.sfhover ul {left: auto;}#japmenu li:hover, #japmenu li.sfhover {position: static;}#footer-column-divide {clear:both;}#japmenu{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJDuOG7DjBtaSjV12upKR8hsfQfs69F6b1slVZO3dxS9VeyIGfc3JpGX_r-f-kxTxEoUYEoBVvWjFw5ueAvOSjbwX5hNIHYhEDfbahDPvla7LG9LT0Yx-nCyYlR9IdJT055V3qVUMQ5Eh/)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;}</blockquote><blockquote class="tr_bq"> </style></blockquote><blockquote class="tr_bq"><br /> </blockquote><blockquote class="tr_bq"><div id="japmenu"></div></blockquote><blockquote class="tr_bq"><ul id="japmenu"></ul></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/">Home</a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/search?max-results=999" target="_blank">Daftar Isi</a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/" target="_blank">Game Facebook</a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"></span><br /> <ul class="children"></ul></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/search/label/cheat%20ninja%20saga"><b>Ninja Saga</b></a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/search/label/wild%20ones"><b>Wild Ones</b></a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"></span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"></span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/" target="_blank">Tools</a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"></span><br /> <ul class="children"></ul></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/2012/02/tools-cheat-ninja-saga.html"><b>Tools Ninja Saga</b></a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/2012/01/sothink-swf-decompiler-full-version.html"><b>Shotink SWF Decompiler</b></a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"></span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"></span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/search/label/bisnis"><b>Bisnis Online</b></a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/search/label/triks%20and%20tips%20blog"><b>Tips dan Triks blog</b></a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"></span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/2012/02/membuat-mini-banner-dan-tukar-link.html"><b>Make Banner And Link Exchange</b></a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://anandacsbx.blogspot.com/" target="_blank">About Me</a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"></span><br /> <ul class="children"></ul></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://www.facebook.com/prima.ananda1"><b>My Facebook</b></a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://www.blogger.com/profile/07109848102630841007"><b>Profil Blogger</b></a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"><span style="background-color: #cccccc;"><br /> </span><br /> <li><span style="background-color: #cccccc;"><a href="http://www.blogger.com/www.twitter.com/prima689"><b>My Twitter</b></a></span></li><br /> <span style="background-color: #cccccc;"><br /> <br /> </span></blockquote><blockquote class="tr_bq"></blockquote><blockquote class="tr_bq"></blockquote><blockquote class="tr_bq">

ganti code pada yg saaya warnai dengan code anda... sekian semoga bermanfaat

NB : SS bisa langsung dilihat diblog saya ini...

Have Fun ^_^

Penulis : Unknown ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Membuat Menu Bar Melayang Pada Blog ini dipublish oleh Unknown pada hari Sunday, February 12, 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 2 komentar: di postingan Membuat Menu Bar Melayang Pada Blog