1. Login ke blog kamu
2. Pilih Template > Edit HTML > Cari kode </head>
3. Letakan kode di bawah ini tepat di atas kode </head>
<style>
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
width:980px;
float: left;
}
#coolMenu > li {
float:left;
}
#coolMenu li a {
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 30px;
float:left;
padding: 5px 10px 5px 10px;
}
#coolMenu li:hover ul {
}
/* Main menu
------------------------------------------*/
#coolMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
margin:0 auto;padding:0 auto;
background: #02b0cf;
padding-left:3px;
border-bottom:1px solid #ccc;border-top:2px solid #ccc;
}
#coolMenu > li > a {
color: #fff;
font-weight: bold;
padding:8px 10px 8px 10px;
}
#coolMenu > li:hover > a {
background: #f09d28;
color: #000;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
/* Submenu
------------------------------------------*/
#coolMenu ul {
background: #f09d28;
padding:3px 5px 3px 5px;
}
#coolMenu ul li a {
color: #000;
width:100px;
}
#coolMenu ul li:hover a {
background: #ffc97c;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function(){
$('#coolMenu').find('> li').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.stop(true, true).slideToggle('fast');
});
});
</script>
Kode yang berwarna biru adalah kode lebar menu nya, jadi sesuaikan dengan blog kamu.
Kode yang berwarna merah adalah warna background menu nya.
Kode yang berwarna ungu adalah warna background sub menu nya.
4. Simpan Template
5. Copy code di bawah ini di "Menu Tata Letek > Add Gadget di bawah header > HTML/Java Scrip"
<ul id="coolMenu">
<li><a href="isikan link web kamu">Home</a></li>
<li><a href="#">Health</a></li>
<li>
<a href="#">Blogger</a>
<ul class="noJS">
<li><a href="#">jQuery</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Widget</a></li>
</ul>
</li>
<li>
<a href="#">Resep</a>
<ul class="noJS">
<li><a href="#">Dessert</a></li>
<li><a href="#">Chicken</a></li>
<li><a href="#">Drink</a></li>
<li><a href="#">Cake</a></li>
<li><a href="#">Breakfast</a></li>
<li><a href="#">Soup</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Seafood</a></li>
</ul>
</li>
<li><a href="#">Naruto Episode</a></li>
<li>
<a href="#">More</a>
<ul class="noJS">
<li><a href="#">Kode Warna</a></li>
<li><a href="#">Get This Menu</a></li>
</ul>
</li>
</ul>
6. Simpan
Notice:
- kode yang berwarna hijau ganti dengan link yang kamu inginkan. Biasanya seperti ini: /search/label/label kamu
- Kode yang berwarna kuning kata yang akan muncul pada menu. Ganti kata-katanya sesukamu
Tidak ada komentar:
Posting Komentar