Get Chitika | Premium

Cara Membuat Menu Horizontal Pada Blogspot

Share |
1.Login ke akun Blogspot pembaca.
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)

0 komentar : Cara Membuat Menu Horizontal Pada Blogspot

Post a Comment

" Terimakasih kami ucapkan kepada pengunjung yang telah berkunjung di blog ini.

Tentang artikel di atas APA TANGGAPAN dari anda semua ? "

 

About Administrator

My Photo
sahrul
hanya seorang blogger newbie yang ingin mencari ilmu dan pengalaman di dunia maya untuk di bagikan ke para pembaca blog ini.
View my complete profile

Recent Comments

Site info