0 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/AVvXsEh2lJl3ffZuRdpwVVEsLa4dHtXcdK4ruoWnr_NrqCeHW0poWiIsqB-6AAkdz1NQWwU6wB3fPiPa6u0VAd2FquOPHu09OAuSAn3qiDKgA_a3fHrFh4BLd7Ct3js5V_zmxG5XxfaIbHlmcWo/s400/photo.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNITFUELmDH_2_uQXO0HGu5kpfQkielmxNGUc0m4X_UHX03W1Y3KzcxYgIcTLro00umXWYKaIS7lqmcWVzxRMXuIFgS5-X1YOoSVxlz7ppKXhg5jaDnLpIdbR1PzBaqZ4B867auE7rjCM/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqroMNkn2LqqyQgjEonttkan0HNtou1sBP1G-MPiqD6hxBgRczLkXjJBquMfgXN5Ct3kQhyL_uKMB9Lmuunc0QeF944FoIkW1IEHz1o0Oxd1Ovn400oUmeQ4sAN-zHdFryYKgCv-Wt56Y/s400/twitter.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-Aap1MTfvuVk1DyAkXmedi90z6UqTsxWQS11SwxQbydpIKjXb47PCIBmPjfR6uIOP6mf7z6YpQCmqfj4Zs_2PJwBF-7-RSxeJKGn5tEfOoeUp84wiH20bVGkCPXgoCNa8A-RCUJOyWM/s400/mail_edit.png);
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2GnFUqLFkasWLYmWUC8pEOiXKldBTwa76WuaWkQKIPa-KKCroCUPPiCllmdkMFNZW0R7esSpIF6JVUtWQY8egesIOUfIPV03UZpqZmQhLA3tIRKS6Hczc6QHAJEarEK17YS68CK81uA/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>

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat Menu Navigation Tersembunyi. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://kans-sas.blogspot.com/2012/01/cara-membuat-menu-navigation.html" target="_blank">Cara Membuat Menu Navigation Tersembunyi</a>

:: Get this widget ! ::

Artikel Terkait :