Membuat Menu Hidden di Blog

Selasa, 10 Januari 2012 | frends di 21.48 |

       Memperindah blog adalah salah satu tujuan untuk meningkatkan pengunjung blog dan membuat pengunjung tidak bosan untuk selalu mampir di blog kita.  Jika tampilan dari blog itu-itu saja pasti kita akan bosan melihat blog yang kita kunjungi sama semua tampilannya dengan yang sebelumnya.  Nah.. Kali ini kita bicara tentang menu blog, kebanyakan blog menu itu pasti berada di bawahnya header seperti Akatsuki Blog™ ini.  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.

1. Login ke Blogger
   
2. Klik Design > Edit HTML
3. Letakkan kode berikut di atas kode ]]>
   
   
   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
   
   
4. Letakkan kode berikut di bawah  ]]>
   
   
   
   
   
   
5. Terakhir letakkan kode berikut di atas kode 
   
   
   
   #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
   
   
6. Klik 'Save Template' , lihat hasilnya dan beri komentar di artikel ini .. makasih :D