Cara Membuat Menu diBlogspot
Mempercantik Blog Tutorial Blog
1. Login
2. Klik Menu Rancangan (dulu tata letak)
3. Pilih Edit HTML (Jangan lupa centang dulu Expand Template Widget dan banckup, buat jaga-jaga kalau ada ketidak berhasilan)
4. Cari kode seperti dibawah ini:
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
5. Jika sudah ketemu, silahkan copy struktur berikut tepat dibawahnya
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>Dariku</a></li>
<li><a href='URL 3'>Tutorial</a></li>
</ul>
6. Lalu tambahkan kode ccs dibawah ini, taruh diatas 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;
}
7. Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat dulu hasilnya.
Soal warna bisa diatur sesuai selera, begitu pula dengan menu-menu yang ingin ditampilkan.
Ket:
a.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
b.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
c.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
d.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
e.Silahkan ganti URL 1,URL 2, URL 3 dengan URL halaman yang akan dituju
Selamat mencoba, semoga postingan ini bermanfaat bagi teman-teman yang membutuhkan.
salam hormat dariku,
widhawati
