Sekarang sudah siapkah kalian melihat menu blog yang unik daripada yang lain ? Silahkan menuju ke sini untuk melihat demo nya http://sasacullens.blogspot.com/ .
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#SEKILAT INFO{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 *SEKILAT-INFO* yang ada di langkah ke 3, begitu seterusnya
- Klik 'Save Template' , lihat hasilnya dan beri komentar di artikel ini .. makasih :D
