Membuat Menu Floating Slide Out Vertical Blog

Haduh, kehabisan bahan posting, mendingan share widget milik sendiri aja deh. Pada posting kali ini saya share aja, cara membuat menu slide out melayang di atas halaman blog seperti pada blog ini, pengunjung akan disuguhi navigasi yang mudah dan dengan tampilan yang dinamis terlihat lebih menarik,serta menghemat tempat pula, ya udah deh, ni langkah-langkahnya :

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 !!!