Okelah saya 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 draft bloger. 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/AVvXsEgw-CnCLGWSWrylPyaE47X_1jg2ohRH-GQ0vrwSrGLEkMCZz3gYoFkl8J1jg0M8dcwHOqV3lMh7hb8OuG3YpS4oo4WNqisB4iH___h9b8sOAuKzTGwXVSJ9N1bnLf5E6xAM-cGSdFHtT3I/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 ▼</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 ▼</div>
<ul>
<li>
<a href='#'>-</a>
</li>
<li>
<a href='#'>-</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>China ▼</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 ▼</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 ▼</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 ▼</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....
Tidak ada komentar:
Posting Komentar