Cara Membuat Menu Navigation Tersembunyi

Menu Navigation Tersembunyi ini menyimpan Profile,
Facebook, Twitter, E-Mail dan RSS Feed Anda.

Lihat contohnya di bagian atas blog ini.
Coba arahkan cursor Anda pada menu-menunya.

• My Profile
• My Facebook
• My Twitter
• My E-mail
• RSS Feed

Berikut ini langkah untuk membuatnya :

1.   Rancangan -> Tambah Gadget ->
      Pilih HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode berikut ini lalu simpan.

<ul id="navigation">
<li class="about-me"><a href="URL Profile Anda/"><span>My Profile</span></a></li>
<li class="facebook"><a href="URL Facebook Anda"><span>My Facebook</span></a></li>
<li class="twitter"><a href="URL Twitter Anda"><span>My Twitter</span></a></li>
<li class="e-mail"><a href="URL E-mail Anda"><span>My E-mail</span></a></li>
<li class="rss"><a href="URL RSS Feed Anda"><span>RSS Feed</span></a></li>
</ul>

KETERANGAN :

Masukkan URL-URL Anda sesuai namanya.

3.   Lalu masuk ke Edit HTML.

4.   Cari tag ]]></b:skin>

5.   Copy kode berikut dan letakkan
      di atas tag ]]></b:skin> ini.

ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:750px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: 0px;
width: 100px;
height: 25px;
background-color:#fff;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #0000ff;
-moz-border-radius:0px 0px 8px 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-khtml-border-bottom-right-radius: 8px;
-khtml-border-bottom-left-radius: 8px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
ul#navigation li a:hover{
background-color:#fff;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#ff0000;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
}
ul#navigation .about-me a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPl_1vg0ZDzJtUwVLVe8ewS8qQldwAgnYmilfyK_7cdyn5PR50vVsLpWydcugL_QhTu39y4wbDAuu664Mslna5FZRHXAAjKtVRp0s9c53mJbdUycgicVU2862_PRQn8z2ZbmLiMq8MYSw/s400/photo.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLP0GDFtDXV1OgZo0-HJPQ6wVtIzl4EWGhSSkMuMqRNjz4_9-fURB3EvLqhayDby8gNof9u4HkdjXB0TTKf5q9VW62LOgT7zCiLrTYpzImEj57S86r18AQ4CTsWX40EHqH1yTMj2CQDp8/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZOMYwPM3LOZZKfZILvYb7GZoIoiLp74bOFRcjjJ2i1KJbsW-Urv_GRqawzK5NSNQ6TnLetllViOOx7yorbmP52SJus7oyJQnhXTQdhKAP4mf8rYNrMCgLhIpjRadEZapnVqwSL2D-F4E/s400/twitter.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCg1zRKRgHAJx9iXU0DR7DP3oHV46CrA61ogF0wlfNtk5aeSbwCN8QWPhV9KMYNQ9-Jyyfy2a4cgmYmcGM7YEItMUHehQ3n7CQBcixlHMKc3t9c69KRc6rfLMoryOd7AJ16rOZzpPZ2II/s400/mail_edit.png);
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2MvWefKXhFMbVpJejnkY3pzIfdEkleEKmgGrhlJSiCF1XPQ5vzKzeRP2UAxDKDs_X0na6Wa7dztcNUlWOG9sxEZye97XXr5HnZuYGmK0W57rg7UyacBqkZUvenqoIJQfPLvuRxzj-OHA/s400/rss.png);
}

6.   Cari lagi tag </body>

7.   Copy kode berikut dan letakkan di atas
      atau sebelum tag </body> ini :

<script type="text/javascript" src="https://sites.google.com/site/jquery01/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>

Selamat mencoba dan tetap good luck!