Artikel Curian

      Lagi lagi.. lagi.. saya menemukan sebuah menu hidden yang unik dan sangat menarik untuk di pasang di blog kalian.  Kali ini tampilan menu hidden berada di atas, kalau yang sebelumnya kan disebelah kiri blog.  Mau coba yang terdahulu dulu ? Cek aja disini http://dopind.blogspot.com/2011/12/membuat-menu-hidden-di-blog.html.  Sebenarnya sistem kerjanya sama yang sebelumnya sama juga pada menu hidden yang kali ini, ya.. tapi kan selera orang berbeda - beda, kadang ingin di sebelah kanan ataupun di atas blog, kalian pilih aja selera hati kalian.

      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 ]]></b:skin>
   
   
   ul#deopradipta2 {
   position: absolute;
   margin: 0px;
   padding: 0px;
   top: 0px;
   left: 200px;
   list-style: none;
   z-index:999999;
   width:721px;
   }
   ul#deopradipta2 li {
   width: 103px;
   display:inline;
   float:left;
   }
   ul#deopradipta2 li a {
   display: block;
   float:right;
   margin-top: -2px;
   width: 100px;
   height: 25px;
   background-color:#transparent;
   background-repeat:no-repeat;
   background-position:50% 10px;
   border:2px solid #000;border-radius:5px;top:0px;box-shadow:0 0 5px #000;
   -moz-border-radius:0px 0px 10px 10px;
   -webkit-border-bottom-right-radius: 10px;
   -webkit-border-bottom-left-radius: 10px;
   -khtml-border-bottom-right-radius: 10px;
   -khtml-border-bottom-left-radius: 10px;
   text-decoration:none;
   text-align:center;
   padding-top:80px;
   opacity: 0.7;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
   }
   ul#deopradipta2 li a:hnver{
   background-color:#FF0000;
   }
   ul#deopradipta2 li a span{
   letter-spacing:2px;
   font-size:11px;
   color:#000;
   }
   ul#deopradipta2 .aa a{
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_wBGH8-66ocmEt6sk-OgsUcqq67jbLYKPXcHcbAxjBgBU7yy1qrTbguiycpHkLCTjaVLpQqHkLG7mGb4_ljI-xd2VhqPxwayWgSHe7l-9PgCti1243FrKloK2k7i7gRivoWQ21twyGyU/s1600/1deo.png);
   }
   ul#deopradipta2 .ab a {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ6TRa3ah7jQCpBxI_CirReu7VF9TlrHgM-GMDFQrP-_pxgl438MmrU4x10BfReJpvgV0JGwS_vGWLaQqKFpuxtFlPrwXKLNVoLgh__dueuhthbhTqOb7h62U-bg29RAjp0a-rfh9Y_XQ/s1600/3deo.png);
   }
   ul#deopradipta2 .ac a {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-KNlHkt0rUvKdS0aQTDLJaV0ZTIOjR6HhKYRy9CE1E4JN7qXaooZm6YLg8TBGjJ1W5skSAA4ZmFQF7T-E9XJGhLJQQaJS5oJa8VB6SkJFHGkRj3YZLR6lHs2p_DDlBxkIxdbsfPnEQk/s1600/2deo.png);
   }
   ul#deopradipta2 .ad a {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkVCWO0QKn6ynq1myhXA6pePCaZiBaI97wIfT2MZ45amlf2UneMLj8Phiz4xxUHE54JAMGA94w7tt84gt2ulvEc0DWn7k1HB-JXFUZwLGOPHfFleiBN_axOTo8vAixBXsM89rHvlEkiI/s1600/6deo.png);
   }
   ul#deopradipta2 .ae a {
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEMS_8tUgD__2saCnAULm4Jv-B8JSVuuiN6R0H6pN7JUEjw3eE-6icJ3U3f1aeYexUbIJI8FmbZTS62A3qussXj_kJJ6j8mNVy__FV20Vswd7kOkxuGA5lcjFLn3cADq3QGPuWnvb7NfU/s1600/4deo.gif);
   }
   
   #Ganti kode berwarna Orange dengan link gambar yang kalian inginkan
   
   
4. Letakkan kode berikut di bawah  ]]></b:skin>
   
   
   <script src='http://www.vincentcheung.ca/jsencryption/jsencryption.js' type='text/javascript'/>
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
   <script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
   <script type='text/javascript'>
   $(function() {
   var d=300;
   $(&#39;#deopradipta2 a&#39;).each(function(){
   $(this).stop().animate({
   &#39;marginTop&#39;:&#39;-80px&#39;
   },d+=150);
   });
   
   
   $(&#39;#deopradipta2 &gt; li&#39;).hover(
   function () {
   $(&#39;a&#39;,$(this)).stop().animate({
   &#39;marginTop&#39;:&#39;-2px&#39;
   },200);
   },
   function () {
   $(&#39;a&#39;,$(this)).stop().animate({
   &#39;marginTop&#39;:&#39;-80px&#39;
   },200);
   }
   );
   });
   </script>
   
   
5. Terakhir letakkan kode berikut di atas kode </body>
   
   
   <script src='http://idub.007sites.com/smile1.js' type='text/javascript'/>
   <ul id='deopradipta2'>
   <li class='aa'><a href='http://dopind.blogspot.com/feeds/posts/default'><span>RSS</span></a></li>
   <li class='ab'><a href='http://www.facebook.com/manchesterunitedd'><span>FACEBOOK</span></a></li>
   <li class='ac'><a href='http://twitter.com/49919491'><span>TWITTER</span></a></li>
   <li class='ad'><a href='http://www.alexa.com/siteinfo/http://dopind.blogspot.com/?p=rwidget#'><span>ALEXA</span></a></li>
   <li class='ae'><a href='http://dopind.blogspot.com/view'><span>VIEW</span></a></li>
   </ul>
   
   #Ganti kode warna Hijau dengan kode link yang kalian ingin pasang
   #Ganti kode warna Putih dengan tulisan keterangan menu
   #Jika ingin mengganti gambar *li class='aa'* kalian bisa ganti di kode  *deopradipta2 .aa a* yang ada di langkah ke 3, begitu seterusnya
   
   
6. Klik 'Save Template' , lihat hasilnya dan beri komentar di artikel ini .. makasih :D