Membuat Menu Navigasi yang Keren..!! (Smooth Navigational Menu v1.31)

Diposting oleh Mizan 12/25/2009

Hari ini adalah hari Natal... Oleh karena itu saya pribadi mengucapkan selamat bagi kemeriahan perayaan dan liburan keluarganya... Tapi, saat saya menulis posting-an ini, hujan deras sedang melanda Kota Bandung, makanya ga bisa kemana-mana nih...!!! -_- Dari pada tidak ada kerjaan jadi lebih baik menambah postingan blog, tul ga.....!! (Bukannya ane kaga ngormatin hari liburan ini ya... maklum... -_-')

Tips ini diciptakan oleh Dynamic Drive, sebuah situs yang berbagi script web secara gratis, dan kali ini, salah satu script-nya saya bagikan untuk sobat blogger semua.... ^^

Coba perhatikan menu navigasi yang ada di atas blog ini..! Keren kan..!! navigasi menu dengan fade animation pada slide menu-nya. Sekarang, saya akan menjelaskan bagaimana cara membuat menu tersebut untuk blog kalian sendiri, tentunya dengan modifikasi agar sesuai dengan blog lain.. ^^

Seperti biasa, untuk mengedit javascript, masuk pada Dasbor Blogger, klik Tata Letak, lalu pilih tab Edit HTML, kemudian centang Expand Template Widget. Setelah itu kalian siap menjadi Blogger Web Designer... hehehe...!!! ^^ Baiklah tanpa membuang waktu, berikut instruksinya:

Cari kode <body> (gunakan Ctrl+F untuk mencari), lalu letakkan script berikut tepat di atasnya.

Setelah itu masukkan script CSS ini tepat di atas kode ]]></b:skin>.

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*warna latar belakang menu*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*Warna latar belakang items*/
color: white; /*Warna teks items*/
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ 
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*warna latar belakang onmouseover (hover state)*/
color: white; /*Warna teks onmouseover*/
}
 
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS untuk bayangan  ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow transparansi. tidak bekerja di IE*/
opacity: 0.8;
}

Jangan lupa untuk memperhatikan catatan tips untuk mengubah warna pada script CSS. Setelah itu simpan editan, dan masuk pada tab 'Elemen Laman'. Tambah gadget baru, pilih 'HTML/Javascript Kode', lalu masukkan kode berikut ini:

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://em-mizan.blogspot.com">Halaman Utama</a></li>
<li><a href="#">Menu</a>
  <ul>
  <li><a href="http://em-mizan.blogspot.com/2009/10/blog-post.html">Daftar Isi</a></li>
  <li><a href="http://em-mizan.blogspot.com/2009/10/kontak-blogger.html">Kontak Saya</a></li>
  <li><a href="http://em-mizan.blogspot.com/feeds/posts/default">Berlangganan Feed</a></li>
  </ul>
</li>
<li><a href="#">Ikuti Saya</a>
  <ul>
  <li><a href="http://twitter.com/mimuha" target="_blank">Twitter</a></li>
  <li><a href="http://www.facebook.com/mimuha" target="_blank">Facebook</a></li>
<li><a href="http://www.mybloglog.com/buzz/members/mimuha/" target="_blank">MyBlogLog</a></li>
  </ul>
</li>
<li><a href="http://emmizan.mofuse.mobi/"><i>Mobile Version</i></a></li>
<li><a href="#"><i>Blogroll</i></a>
  <ul>
  <li><a href="http://abdibuku.blogspot.com/" target="_blank">ABDI MEDIA BUKU</a></li>
  <li><a href="http://www.blogngeblog.com/" target="_blank">Belajar Blog</a></li>
  <li><a href="http://yezdibooo.blogspot.com/" target="_blank">BOOOOOOOOOOOO's Blog</a></li>
  <li><a href="http://caramelcoklat.blogspot.com/" target="_blank">Caramelcoklat</a></li>
  <li><a href="http://technoscomputers.blogspot.com/" target="_blank">Computer tips</a></li>
  <li><a href="http://hotrevelation.blogspot.com/" target="_blank">Hot Revelation</a></li>
  <li><a href="http://hothottest1.blogspot.com/" target="_blank">Hottest Wonder World</a></li>
  <li><a href="http://infoupdates-sri.blogspot.com/" target="_blank">Info Updates</a></li>
  <li><a href="http://duniakecil-ku.blogspot.com/" target="_blank">Mauren's Blog</a></li>
  <li><a href="http://myworld-encyclopedia.blogspot.com/" target="_blank">My World - This moment</a></li>
  <li><a href="http://sharingyuk.blogspot.com/" target="_blank">Sharing Yuk...!</a></li>
  <li><a href="http://tasknews.blogspot.com/" target="_blank">Siva - Only For Actress</a></li>
  <li><a href="http://duidon.blogspot.com/" target="_blank">SuaveOnline</a></li>
  <li><a href="http://www.folklore4u.blogspot.com/" target="_blank">The Folklore</a></li>
  <li><a href="http://tipgoceng.blogspot.com/" target="_blank">Tips n Tricks</a></li>
  <li><a href="http://vkramz.blogspot.com/" target="_blank">Universal News</a></li>
 </ul>
</li>
</ul>

Kode di atas dibuat sama persis seperti menu yang ada pada navigasi blog ini. Ubah saja alamat tiap menunya (contoh: '<li><a href="http://em-mizan.blogspot.com">Halaman Utama</a></li>') Ubah saja alamat URL dan judul link-nya. Kalau ada menu yang ingin dihapus, hapus dari kode <li> sampai kode </li>. Untuk menghapus sub menu hapus dari <ul> sampai kode </ul>.

Setelah itu simpan dan letakkan gadget tersebut sesuka hati kalian... ^^, pilih pratinjau, dan lihat hasilnya. Jangan lupa disimpan... ^^ ...Selamat mencoba..

KEMBALI KE ATAS

Kunjungi artikel yang berhubungan:

Blogger Widgets, Javascript

Muhammad Mizan ›› Catatan Dalam Jaringan

Membuat Menu Navigasi yang Keren..!! (Smooth Navigational Menu v1.31)

Kunjungi artikel yang berhubungan:

KATEGORI

ARSIP

KOMENTATOR

Mengenai Saya

Pos Terpopuler