Cara Membuat Menu Navigasi Floating Slide Out Vertical

aduh sahabat cerdas ane kehabisan bahan posting nih mendingan ane posting widget punya ane ajalah dari pada ga posting sama sekali. kali ini saya akanshare tentang cara membuat menu floating slide out vertical
ini contohnya

cara pasangnya cukup mudah tinggal ikutin aja penjelasan berikut :

1. Log inke Blogger.
2. Pilih Rancangan dan Edit Html, jangan lupa centang Expand Template Widget, bila perlu Backup terlebih dahulu templatemu agar jika terjadin galat mudah dikembalikan.
3. Cari kode </head>, gunakan Cttrl+F agar lebih mudah, copy script berikut dan pastekan di atas kode </head> :

<script type="text/javascript" src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

       4. Kemudian cari kode ]]></b:skin> dan letakkan kode Css berikut di atas ]]></b:skin> :

/*Navigasi*/
ul#navigation { position:fixed; margin:0px; padding:0px; top:-20px; left:370px; list-style:none; z-index:999999; width:675px; font:normal 16px Electrolize,Sans-Serif bold; -webkit-animation:2s fxhompinav ease-in-out; -moz-animation:2s fxhompinav ease-in-out; -ms-animation:2s fxhompinav ease-in-out; animation:2s fxhompinav ease-in-out; } ul#navigation li { width:95px; display:inline; float:left; margin:0 0 0 2px; } ul#navigation li a { display:block; float:left; margin-top:-74px; width:95px; height:28px; background-color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.6);
color: rgba(0, 0, 0, 0.6); background-repeat:no-repeat; background-position:50% 150px; border:2px solid #b9b9b9; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -khtml-border-bottom-right-radius:10px; -khtml-border-bottom-left-radius:10px; border-radius:0px 0px 10px 10px; color:#333333; text-decoration:none; text-align:center;color:#f1f1f1; text-shadow:0 1px 1px #000; padding-top:95px; -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; } ul#navigation li a:hover { margin-top:-3px; background-position:50% 25px; color:#7b7b7b; position:relative; } ul#navigation li a:hover:after { content:""; width:0px; height:0px; position:absolute; top:100%; left:45%; margin-top:2px; border-width:5px; border-style:solid; border-color:transparent transparent lime transparent; }
ul#navigation li:nth-child(1) a {background-image:url(Url Gambar Menu ke 1); }
ul#navigation li:nth-child(2) a { background-image:url(Url Gambar Menu ke 2); }
ul#navigation li:nth-child(3) a { background-image:url(Url Gambar Menu ke 3); }
ul#navigation li:nth-child(4) a { background-image:url(Url Gambar Menu ke 4); }
ul#navigation li:nth-child(5) a { background-image:url(Url Gambar Menu ke 5); }
ul#navigation li:nth-child(6) a { background-image:url(Url Gambar Menu ke 6); }

@-webkit-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-moz-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
/*Navigasi*/

      5.  Kemudian Simpan Template.
      6.  Selanjutnya Masuk ke Elemen Laman, dan Tambah Gadget Html/Javascript, masukan script berikut :

<ul id="navigation">
<li class="nav1"><a href="http://nthoeng.blogspot.com/">Home</a></li>
<li class="nav2"><a href="http://nthoeng.blogspot.com/feeds/posts/default">Rss Feed</a></li>
<li class="nav3"><a href="http://nthoeng.blogspot.com/p/blog-teman.html">Blog Teman</a></li>
<li class="nav4"><a href="http://nthoeng.blogspot.com/p/site-map_21.html">Site Map</a></li>
<li class="nav5"><a href="javascript:showHideGB()">Guestbook</a></li>
<li class="nav5"><a href="http://nthoeng.blogspot.com/p/fan-page.html">Fan Page</a></li></ul>

      7.  Dan Simpan.

Nb : Teks Berwarna merah merupakan Script Jquery, jika pada templatemu sudah ada script jquery 1.3.2, maka kamu tidak perlu memasangnya lagi, untuk teks warna hijau ganti dengan Url gambar yang akan di tampilkan sebagai thumnail, dan silahkan sesuaikan url pada Html/Javascriptnya.

Selamat Mencoba Dan Semoga Berhasil !!!