Menu blog melayang

Sebelumnya sudah kita bahas bersama cara membuat menu blog super keren nah tak jauh dari materi sebelum nya kali ini pun kita akan membahas cara membuat menu blog melayang nah sebagai contoh lihat DEMO nya  sedangkan cara pembuatan nya :

1. login ke www.blogger.com
2. masuk rancangan >> Edit HTML>> cari kode  ]]></b:skin> dan masuk kan kode di bawah ini tepat di atas nya berikut kode nya 
#floatMenu { position:absolute; top:200px; left:65%; margin-left:235px; width:80px;} #floatMenu ul {list-style-type: none;} #floatMenu ul li a { display:block; background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent; background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b)); border:1px solid #999; border-left:6px solid #999; text-decoration:none; color:#ccc; padding:5px 5px 5px 25px; width:80px; -webkit-transition: all 0.6s ease-out; box-shadow: #333 0px 0px 10px; -moz-box-shadow: #333 0px 0px 10px; -webkit-box-shadow: #333 0px 0px 10px; } #floatMenu ul li a:hover { color:#fff; background-color:#333333; border-right:6px solid #999; width:150px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; } #floatMenu ul.menu1 li a:hover {border-color:#09f;}
3. Lalu masukkan kode di bawah ini tepat di bawah kode  ]]></b:skin>berikut kode nya
<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery_mini.js"></script> <script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery.dimensions.js"></script> <script language="javascript"> var name = "#floatMenu"; var menuYloc = null; $(document).ready(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px"; $(name).animate({top:offset},{duration:500,queue:false}); }); }); </script>
4. Lalu save Template

Nah untuk penempatan kode java script nya : Masuk rancangan >> tambah gadget >>Pilih HTML java script lalu masuk kan kode berikut :

<div id="floatMenu">
<ul class="menu1">
<li><a href="#" > Home </a></li>
<li><a href="#" > About </a></li>
<li><a href="#" > Contact </a></li>
<li><a href="#"> Blog </a></li>
<li><a href='#' onclick='MGJS.goTop();return false;' onclick="return false;"> Back to top </a></li>
</ul>
</div>

Perhatian : teks yang berwarna HIJAU (top:200px; left:65%;) dapat sobat  ganti apa bila penempatan nya tidak sesuai dengan template sobat ....250%,atau 300% misal nya ...gunakan PRATINJAU untuk melihat hasil sementara .oke selamat mencoba .....salam.....jangan lupa coment nya oke ....