2.Klik link menu Tata Letak, kemudian pilih Edit HTML.
3.Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget.
4.cari kode ]]></b:skin>.
5.kemudian copykan kode di bawah ini di atas kode ]]></b:skin>.
/*CSS untuk menu horizontal*/
.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}
.menuhor ul li{
list-style: none;
display: inline;
}
.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}
.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}
*Keterangan :
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
6. simpan tempelate.
7.ke elemen laman - tambah gadget (letak terserah pembaca ) biasanya di bawah header.
8. copykan code di bawah ini.
<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>
penjelasan :
silahkan ganti URL dengan halaman yang akan di tuju bila di klik.
9. simpan dan lihat hasilnya.
selamat mencoba....(sumber blog :http://tutorial-website.blogspot.com)
Tidak ada komentar:
Posting Komentar