Kotak menu melayang di blog dengan Css3 dan Jquery

Hallo shobat blogger setelah sebelum nya aku buat Artikel tentang cara membuat menu super keren dan kalian aku yakin kalian dah membuat nya ... gimana berhasil kan oke untuk tutorial selanjut nya aku akan coba buat sebuah menu yang aku kira sangat menarik dan aku yakin pasti sobat ingin segera membuat nya :
                                         Coba lihat contoh seperti itulah yang akan kita buat

untuk yang pertama kalian lakukan adalah

1. Login ke blogger
2. masuk rancangan 
3. Edit html /jangan lupa jaga kemungkinan kesalahan download lengkap dulu template
4. cari ]]></b:skin> dan letak kan kode di bawah ini tepat di atas nya 
#floatMenu {
position:absolute;
top:150px;
left:50%;
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;}
5. Kemudian masuk kan 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>
6. Simpan template

Dan untuk pemanggilan html nya  pilih rancangan >>>tambah gadget >>pilih html java script lalu masuk kan kode di bawah ini di dalam nya  :
<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>
Catatan : teks yang berwarna merah (50%) bisa di ganti untuk menyesuaikan dengan posisi template anda (perubahan kekanan atau kekiri ) sedang kode # adalah link tujuan shobat

Judul Artikel :Kotak menu melayang di blog dengan Css3 dan Jquery

Terima Kasih Sobat sudah membaca Artikel saya Tentang Kotak menu melayang di blog dengan Css3 dan Jquery Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih