Cool Dropdown Navigation Menu (Zoom Template Style)

Hari demi hari terus berlanjut, tutorial demi tutorial pun sudah saya sajikan di blog ini tetapi ketika saya iseng-iseng melihat email saya yang masuk di mwafiez@gmail.com eh...ternyata ada yang ngirim email ke saya dan menanyakan cara membuat menu navigasi seperti di blog saya yang satunya yaitu Ailaspark yang sudah lama ini tidak saya Update karena masih sibuk mengurusi blog ini (heheheh...).

Okelah MWcrew akan memberitahu cara membuat Cool Navigation menu ini, dan sebelumnya menu ini merupakan pengcodingan saya sendiri yang terinspirasi dari menunya Zoom Template karena menurut saya menu inilah yang cocok untuk template Ailaspark. Yah langsung disimak cara pembuatannya gan....

1. Masuk ke dasbor blog anda dan pilih Rancangan > Edit Html kemudian cari kode
]]></b:skin> tempatkan kode CSS berikut tepat diatasnya.

CSS

#ailas-wrapper{background: -moz-linear-gradient(top, #F2F2F2, #D8D8D8);  
background: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#D8D8D8));float:center;height:31px;width:100%px;margin:0 auto}
#nav-menu-label{float:center;margin:0;padding:0}
.text-style{color:#333;display:block;font-size:12px;font-weight:400;text-transform:normal;border-left:0 solid #CDCDCD;height:14px;margin:0;padding:8px 4px 8px 14px}
.text-style:hover{color:#045FB4;cursor:pointer;height:14px}
#nav-menu-label li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1r8C96cybk1BGWjxXHV4CYbVqe8iosmuTU7ftIsbe95tDwWDD9V0Ol0N87iInFlgyoUc_hte5LDBlraEBfaWAYc0NL3mowHsVlt9v2cLnvBLVlPKNoB_m-NIUAvl7tkYSS2ne-4Rfi4/s200/bc_separator.png) no-repeat 2px 0;list-style:none;float:right;margin:0;padding:0}
#nav-menu-label li a,#nav-menu-label li a:link,#nav-menu-label li a:visited{color:#333;display:block;font-size:12px;font-weight:700;text-transform:normal;border-left:1px solid #CDCDCD;margin:0;padding:1px 8px 6px}
#nav-menu-label li a:hover,#nav-menu-label li a:active{color:#045FB4;text-decoration:none;margin:0;padding:1px 8px 6px}
#nav-menu-label li li a,#nav-menu-label li li a:link,#nav-menu-label li li a:visited{background:#f5f5f5;color:#333;font-size:12px;font-weight:400;text-transform:normal;text-align:left;width:150px;border-top:1px solid #FFF;border-bottom:1px solid #CDCDCD;border-left:1px solid #CDCDCD;border-right:1px solid #CDCDCD;margin:0;padding:7px 10px 6px}
#nav-menu-label li li a:hover,#nav-menu-label li li a:active{background:#fff;color:#000;border-top:1px solid #FFF;padding:7px 10px 6px}
#nav-menu-label li ul{z-index:999;position:absolute;left:-999em;height:auto;width:150px;float:left;margin:0;padding:0}
#nav-menu-label li ul a{width:150px}
#nav-menu-label li ul ul{margin:-31px 0 0 100px}
#nav-menu-label li:hover ul ul,#nav-menu-label li:hover ul ul ul,#nav-menu-label li.sfhover ul ul,#nav-menu-label li.sfhover ul ul ul{left:-999em}
#nav-menu-label li:hover ul,#nav-menu-label li li:hover ul,#nav-menu-label li li li:hover ul,#nav-menu-label li.sfhover ul,#nav-menu-label li li.sfhover ul,#nav-menu-label li li li.sfhover ul{left:auto}
#nav-menu-label li:hover,#nav-menu-label li.sfhover{position:static}
#nav li,#nav-menu-label ul{float:left;list-style:none;margin:0;padding:0}

2. Setelah itu cari kode <body> dan taruh kode  ini tepat dibawahnya.

<div id='ailas-wrapper' style='text-align:center'>

<ul id='nav-menu-label'>
<li>
<div class='text-style'>Cartoon &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Cartoon West'>West</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Cartoon Japan'>Japan</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Cartoon'>All Cartoon Movies</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>Malaysia &#9660;</div>
<ul>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>China &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China%20Action'>Action</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China%20Adventure'>Adventure</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China%20Drama'>Drama</a>
</li>
<li>
<a href='#'>Biography</a>
</li>
<li>
<a href='#'>Crime</a>
</li>
<li>
<a href='#'>Fighting</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/China'>All China Movies</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>Asian &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Action'>Action</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Comedy'>Comedy</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Drama'>Drama</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Asian%20Romance'>Romance</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>West &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Action'>Action</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Adventure'>Adventure</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Biography'>Biography</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Comedy'>Comedy</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Crime'>Crime</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Drama'>Drama</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Family'>Family</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Fighting'>Fighting</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Horor'>Horor</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Kids'>Kids</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Sport'>Sports</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/West'>All West Movies</a>
</li>
</ul>
</li>

<li>
<div class='text-style'>Indonesian &#9660;</div>
<ul>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Drama%20Indonesian'>Drama</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Komedi'>Komedi</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Horor%20Indo'>Horor</a>
</li>
<li>
<a href='http://ailaspark.blogspot.com/search/label/Musical'>Musical</a>
</li>
<li>
<a href='#'>All Indonesian Movies </a>
</li>
</ul>
</li>

</ul>
</div>

3. Klik Simpan.


Selesai...Lihat di bagian atas blog anda maka terdapat menu dropdown yang keren.
Selamat mencoba....



"MWcrew"
5 Comments
Related Post

Join the Discussion!

aasholah
March 24, 2012 6:38 PM | Delete comment

Sudah say coba beberapa kali, tapi script nya eror terus gan..,
ane minta bantuannya,.. Coz ane sangat tertarik dengan menu yg satu ini :)

Waff
March 25, 2012 7:23 AM | Delete comment

@aa Solah Ma'f gan kode no 2 diatas saya lupa menambahkan tag penutup </div> jadi silahkan dicoba ulang dengan menambahkan tag penutupnya.

aasholah
March 25, 2012 8:25 AM | Delete comment

Terimakasih gan,, nanti low saya OL di compy saya coba lagi..

Waff
March 25, 2012 11:19 AM | Delete comment

@aa Solah OK gan,,sma-sama...

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan