Membuat Menu Navigasi Dengan Jquery

Membuat Menu Navigasi Dengan Jquery memungkinkan blog kita menjadi lebih menarik dan unik bagi para pengunjung. Terlihat beda dari blog lain membuat blog kita menjadi lebih mudah diingat oleh pengunjung dan akan menghasilkan banjiran trafik yang berdatangan ke blog kita, namun itu hanya dari segi design saja kalau untuk segi seo saya kurang mengerti. Untuk belajar seo silahkan sobat cari di mbah google saya yakin sobat bingung .

Kalau sobat mengikuti (Follow0) blog ini mungkin sudah pernah mendengar tentang Menu Navigasi. Yups benar menu yang berada di bawah header (biasanya). Nah kalau pada menu navigasi sebelumnya menimbulkan efek drop down (mempunyai anak menu yang muncul apabila disentuh oleh kursor) dan kalau yang sekarang efeknya keren deh pokoke lihat aja demo-nya di situ.

Nah setelah melihat demo-nya sekarang kita lihat cara pembuatannya.

1. Seperti biasa login ke blogger
   
   
   
   
   
   
   
2. masuk ke Rancangan (dulunya Tata Letak) => Edit HTML
   
   
   
   
   
   
   
   
   
   
   
   
   
3. Setelah itu cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya
   
   
   #container {
   width: 660px; /*dapat sobat sesuaikan dengan lebar halaman blog sobat*/
   margin-top:-10px;
   }
   
   ul, li {
   margin: 0;
   padding: 0;
   }
   
   #blob {
   background: #0b2b61;
   border-right: 1px solid #0059ec;
   border-left: 1px solid #0059ec;
   position: absolute;
   z-index: 1;
   top: 0;
   background: -moz-linear-gradient(top, #0b2b61, #1153c0);
   background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-box-shadow: 2px 3px 10px #011331;
   -webkit-box-shadow: 2px 3px 10px #011331;
   }
   
   #nav {
   padding:5px;
   position: relative;
   background: #292929;
   float: left;
   }
   
   #nav li {
   float: left;
   list-style: none;
   border-right: 1px solid #4a4a4a;
   border-left: 1px solid black;
   }
   
   #nav li a {
   color: #e3e3e3;
   z-index: 2;
   position: relative;
   cursor: pointer;
   float: center;
   font-size: 13px;
   font-family: helvetica, arial, sans-serif;
   text-decoration: none;
   padding: 15px 26px;
   width: 100%;
   }
   
   
   
   
   
   
   
4. Setelah itu cari kode yang hampir mirip dengan kode di bawah ini
   
   
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Minimalist Template (Header)' type='Header'/>
   </b:section>
   </div>
   
   ...:::Catatan >> semua template mempunyai kode html yang berbeda-beda, inti dari kode di atas adalah Header-wrapper atau bisa juga header:::...
   
   
5. Setelah ke temu kode seperti yang ada di atas, lalu tambahkan kode di bawah ini tepat di bawah-nya
   
   
   <div id="container">
   <ul id="nav">
   <li id="selected"><a href="/">Home</a></li>
   <li><a href="about.html">tulisan URL</a></li>
   <li><a href="Alamat URL">tulisan URL</a></li>
   <li><a href="Alamat URL">Tulisan URL</a></li>
   <li><a href="Alamat URL">Tulisan URL</a></li>
   </ul>
   </div>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
   <script type="text/javascript" src="http://oketrik.googlecode.com/files/Menusjquery.js"></script>
   
   <script type="text/javascript">
   $('#nav').spasticNav();
   </script>
   
   
   
6. Setelah itu simpan dan lihat hasilnya.

Bagaimana trik kali ini? keren bukan? jelas saja keren karena saya dapatkan trik ini dari blog tetangga yaitu Hapia Mesir. Disana banyak sekali widget dan aksesoris untuk mempercantik blog sobat semua. sekarang saya pamit dulu y. Terima kasih dan Happy Blogging .

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg