Cara membuat Menu PopOut vertikal melayang dengan jQuery

• Beberapa pilihan menu ini sangat berbeda dari standarnya menu ini terlihat cantik karena dapat berguna dalam pembangunan statis halaman rumah dan tidak ribet/membuat penuh halaman muka blog. Ikuti langkah-langkah di bawah ini untuk menginstalnya pada blog Anda sendiri:
  
  • * Login ke Blogger
  • * Pilih Tata letak/Tambahkan gadget
  • * Pilih HTML/JavaScript * Paste kode berikut:

Judul Spoiler :

<style>

ul#btt_nav {
position: fixed;
margin: 0px;
padding: 0px;
top: 150px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#btt_nav li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}

ul#btt_nav li a {
display: block;
margin-right: -2px;
width: 100px;
height: 70px; 
background-color:#000;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#btt_nav .home a{
background-image: url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/64/blue-home-icon.png);
}
ul#btt_nav .portfolio a {
background-image: url(http://icons.iconarchive.com/icons/aha-soft/standard-portfolio/64/Graphic-designer-icon.png);
}
ul#btt_nav .services a {
background-image: url(http://icons.iconarchive.com/icons/kyo-tux/phuzion/64/Misc-Tools-icon.png);
}
ul#btt_nav .profile a {
background-image: url(http://icons.iconarchive.com/icons/webiconset/blogging/64/About-me-icon.png);
}
ul#btt_nav .contact a {
background-image: url(http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/64/message-already-read-icon.png);
}
</style>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>

 <script type='text/javascript'> 
$(function() {
$(&#39;#btt_nav a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;85px&#39;},1000);

$(&#39;#btt_nav &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;85px&#39;},200);
}
);
});
</script>
 <ul id='btt_nav'> 
<li class='home'><a href='/'/></li> 
<li class='judul'><a href='#'/></li>
 <li class='judul'><a href='#'/></li>
 <li class='judul'><a href='#'/></li> 
<li class='judul'><a href='#'/></li> 
</ul>

Isi rincian Anda dengan judul yang sesuai untuk lokasi tanda-tanda, kemudian ganti tanda # dengan link dan tekan Simpan. Click DEMO untuk melihat tampilan menu.