Hi semua, kali ini kita akan memuat menu dropdown yang sangat simpel, tidak ada efek jQuery, jadi kita hanya akan menggunakan kode CSS saja. Gambarnya bisa kamu liahat di atas, nanti jadingan kurang lebih ya seperti itu. Udah siap, let go...
Langkah 1
Pergi ke Home » Template, klik tombol "Edit HTML", lalu pada jendela yang muncul, beri tanda centang pada "Expand Widget Templates"Langkah 2
Salin kode berikut di atas kode ]]></b:skin>
/* http://lubieblogger.blogspot.com/
----------------------------------------------- */
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcVgBA-as48KiZa2GMNdHMo_nU5YPtD6Ph_SmvxBC3b_VIPd_wGsntqAuKV_UmLzySwQPA19bBVeVQu_OY6iVafGqiwQo5qMzH3bSf2VYFud8ph6AsOJOqn5SaTl9yqrnb9dDL4njBX2o/") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb5vIuFoqPrnSt-usU4HMFsvnh11JKSI-xaRWWNZ1LqTjpKMUV6G7ku5HDwaK79HZVzFCWLGjdqp_sKCz7U8kyCVm6tx9fm6dpLLbkCINvpHLnpHHshpB6DQZtkFCB-NF5aAY4214oWRM/") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4LrS3AyrQ6mQuvt-Yi_MVHf0bdgu2S74r39un2ycRzestUJf7XHJN6tUjeQHMm39uG7g5K19dDTp5VKXny1z6JRjRjC67Sb9b2VcIN9ddBQxxIIVlrWHre6T6bDHkHvDmUrA_AIEhp-g/') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY9maj0q4lefF8Vhem5vAa4I0c6mEOIG8SMYZU0indfs7P8LUrBzOWgUSTlVdanIgJpH5FdXGr4sNDbGdgdNKleBIKmnnYikoBJyU7PUC0KqDx9Q8AwZ4lRBY40XVspxkKXyE_BD2ZTnY/') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
Salin kode berikut di bawah kode <body>
<div class='menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' id='current'>Products</a>
<ul>
<li><a href='#'>Drop Down CSS Menus</a></li>
<li><a href='#'>Horizontal CSS Menus</a></li>
<li><a href='#'>Vertical CSS Menus</a></li>
<li><a href='#'>Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href='/faq.php'>FAQ</a>
<ul>
<li><a href='#'>Drop Down CSS Menus</a></li>
<li><a href='#'>Horizontal CSS Menus</a></li>
<li><a href='#'>Vertical CSS Menus</a></li>
<li><a href='#'>Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href='http://lubieblogger.blogspot.com/'>Lubie Blogger</a></li>
<li><a href='http://lubietemplates.blogspot.com/' id='current'>Lubie Template</a></li>
</ul>
</div>
Simpan template kamu
0 comments
Hướng dẫn cách viết bình luận