Gimana ? Baguskan ? Sudah pasti banyak yang bilang menu hidden itu bagus. Menu yang dilengkapi kode JavaScript ini mampu bekerja lebih cepat daripada yang lainnya.
- Login ke Blogger
- Klik Design > Edit HTML
- Letakkan kode berikut di atas kode ]]></b:skin>ul#deopradipta {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#deopradipta li {
width: 100px;
}
ul#deopradipta li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#deopradipta .aa a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#deopradipta .ab a{
background-image: url(http://megapolitan-group.com/inc/images/icon_fasilitas.png);
}
ul#deopradipta .ac a{
background-image: url(http://www.e-isik.com/tr/images/icon_admin.png);
}
ul#deopradipta .ad a{
background-image: url(http://www.scortaproduction.com/images/icon_govin.png);
}
ul#deopradipta .ae a{
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Money_Coin_Icon.svg/50px-Money_Coin_Icon.svg.png);
}
ul#deopradipta .af a{
background-image: url(http://fatek.ung.ac.id/informatika/image/icon_berita.png);
}
ul#deopradipta .ag a{
background-image: url(http://www.kemendag.go.id/images/pelayanan_perdagangan_icon_steep.png);
}
ul#deopradipta .ah a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}
#Ganti kode berwarna Orange dengan link gambar yang kalian inginkan - Letakkan kode berikut di bawah ]]></b:skin><script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.2");
</script>
<script type='text/javascript'>
$(function() {
$('#deopradipta a').stop().animate({'marginLeft':'-50px'},1000);
$('#deopradipta > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script> - Terakhir letakkan kode berikut di atas kode </body><ul id='deopradipta'>
<li class='aa'><a href='http://dopind.blogspot.com/' title='Beranda'/></li>
<li class='ab'><a href='http://dopind.blogspot.com/2010/10/about-me.html'/></li>
<li class='ac'><a href='http://dopind.blogspot.com/2011/10/daftar-isi.html'/></li>
<li class='ad'><a href='http://dopind.blogspot.com/2010/10/friends-link_10.html'/></li>
<li class='ae'><a href='http://dopind.blogspot.com/2010/10/pasang-iklanbanner-di-akatsuki-blog.html'/></li>
<li class=&af'><a href='http://www.blogger.com/profile/10331503479536442674'/></li>
<li class='ag'><a href='http://dopind.blogspot.com/2011/12/duidcoid-komunitas-bisnis-online.html'/></li>
<li class='ah'><a href='http://dopind.blogspot.com/2010/10/friends-link.html'/></li>
</ul>
#Ganti kode warna Hijau dengan kode yang kalian ingin pasang
#Jika ingin mengganti gambar *li class='aa'* kalian bisa ganti di kode *deopradipta .aa a* yang ada di langkah ke 3, begitu seterusnya - Klik 'Save Template' , lihat hasilnya dan beri komentar di artikel ini .. makasih :D