Kemudian klik customize untuk mengatur link yang akan dimasukkan, setelah itu klik download.
Langkah selanjutnya, login ke blogger dan pilih Rancangan kemudian klik Edit HTML
Kemudian masukkan kode yang telah didownload seperti contoh dibawah ini,
.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("images/seperator.gif") 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("images/hover.gif") 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('images/sub_sep.gif') 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('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
ditaruh diatas kode ]]></b:skin>
Setelah itu Simpan Template.
Langkah selanjutnya, klik Rancangan, kemudian klik Elemen Laman setelah itu klik Tambah Gadget dan pilih Tambah HTML/JavaScript.
Kemudian masukkan kode berikut
<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<div class="menu">
<ul>
<li><a href="" target="_self" >HOME</a>
</li>
<li><a href="" target="_self" >TUTORIAL</a>
<ul>
<li><a href="" target="_self">BLOG</a></li>
<li><a href="" target="_self">COMPUTER</a></li>
<li><a href="" target="_self">SEO</a></li>
</ul>
</li>
<li><a href="" target="_self" >DOWNLOAD</a>
<ul>
<li><a href="" target="_self">DRIVER</a></li>
<li><a href="" target="_self">SOFTWARE</a></li>
</ul>
</li>
<li><a href="" target="_self" >CONTAC</a>
</li>
</ul>
</div>
Ganti tulisan yg bercetak tebal, sesuai dengan keinginan.kemudian klik simpan.
Artikel Terkait:
0 komentar:
Posting Komentar