Cara Membuat Menu Floating Vertical Di Blogger/blogspot

Pada Tutorial Kali Ini Saya Akan Berbagi Tutorial Cara membuat Menu Floating Vertical Di Blogspot.
apa itu Meu Floating, Menu Floating adalah Menu yang Melayang, pada Blog anda, Dengan Mengikuti Mouse Kemana Anda Gerakkan

DEMO MENU FLOATING

Giama Apakah Anda Minat ??

Berikut Cara Membuat Menu Floating pada Blog Anda

• Login Ke Blogger Anda
• Click Pada Template
• lalu Click pada Edit HTML
• Click pada Element HTML anda, lalu Tekan CTRL+F, Seperti Gambar Di Bawah ini

Masukkan Code </head> di dalam kotak Pencarian, lalu tekan Enter.

Jika Sudah Ketemu, Copy Script Di bawah ini tepat Di Atas </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>

jika Sudah, Masukkan Code ]]></b:skin> Di Dalam Kotak Pencarian Lagi, lalu tekan Enter.

Jika Sudah Ketemu, Tambahkan Code CSS Di bawah Ini Tepat Di Atas nya ]]></b:skin>

/*MENU*/
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;}
/*MENU*/

Jika Sudah Di tambahkan, Silahkan Save Template Anda,

Masih Di Blogger Anda, Pergi Ke Tata Letak Blogspot Anda, Click Tambahkan Gadget,  lalu Tambahkan HTML/Java Script

lalu Tambahkan Script HTML Di Bawah Ini Di Dalam HTML/Java Script Anda

<ul id="navigation">
<li class="nav1"><a href="#">Home</a></li>
<li class="nav2"><a href="#">Feed</a></li>
<li class="nav3"><a href="#">About me</a></li>
<li class="nav4"><a href="#">SiteMap</a></li>
<li class="nav5"><a href="#">Disclaimer</a></li>
<li class="nav5"><a href="#">Privacy Policy</a></li></ul>

Silahkan Ganti tanda Pagar # Dengan URL yang Anda Inginkan

Simpan HTML/java Script Anda, Dan Liat Hasil nya Menu Floating Pada Blogger/Blogspot Anda