0 Cara Membuat Menu Navigation Tersembunyi

---

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

---

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/AVvXsEg3jR2vraYiB0VUVAecWJxGp2IJXdj3Gin5KZ3-AifT6JqM1yjOcikD4PLa59a9Uk2d7w1qp_vQ2WekeokBWGhXSFc8GP7lzuFSFxLCzjjZZehSeV1gKNOo6sZyPTArE5AQrs0OSkxztkI/s400/photo.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_7-RfF5nFCSod2jKmmHX8d3O3fjqwo7wAv4x1kWpxsoQOY-UKtX6EIwYqI4eSzChLwoF-yGe5f7r_BUI0A0mghfYwAY6vjDVUpN8Kn_0HiQBv1KdHycFBgcRpEF1nptgPdpDThIL4q8/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZXYLDgjutSVZcfQ7q3NqKqyIl-VtzGauA72JP-tFsw-AwWHFELZMh26xdOOc1Vbu-xESm9wovSKIXgRe-kAAZFNncSX1GXf4MjKo-C5_riOvFZQXy5D9g8rDfk0itNoHbfxP3dXnI758/s400/twitter.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuEQS3pQwPlXrLmKdsT6nHYVoIApmPzK-HRly6t2XRceaA88zom3sEw3zuFhaIX96kx7IaueslwSu5IOWCujb7L96lcNV_bbqG6TUjDOwG1ik2rpEQbGUm2DHC-0hJ6oUZ1Z_UjYW1SMA/s400/mail_edit.png);
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzTGmNoNsdupw8OBCC6tyXAzQAopG72etXULTska7TaCBppDXge-dp7sBxDtco2Tej8Pgw_kpzhe7jBDI77oTt5mNIY-25evWZvf47fCEKvue5SY6IZSgQ_byR2TdHqzkc78NLzPaoao/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!