Cara Membuat Menu Horizontal Pada Blog. Pada kesempatan ini saya akan share tentang cara membuat menu horizontal pada blog. Menu horizontal adalah menu - menu yang disusun secara mendatar. Tanpa banyak kata langsung saja saya berikan caranya dibawah ini.
Cara Membuat Menu Horizontal Pada Blog :
a. Login ke blogger dengan akun anda.
b. Klik Rancangan, pilih Edit HTML
c. Jangan lupa untuk mencentang pada expand widget
d. cari kode ]]></b:skin> (untuk mencarinya tekan tombol CTRL dan F, tuliskan ]]></b:skin>, enter)
e. Letakan kode di bawah ini tepat diatas kode ]]></b:skin>
#navlist ul{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited{
color: #006600;
background-color: #000000;
text-decoration: none;
border: 1px solid #006600;
}
#navlist a:hover{
color: #000000;
background-color: #006600;
}
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited{
color: #006600;
background-color: #000000;
text-decoration: none;
border: 1px solid #006600;
}
#navlist a:hover{
color: #000000;
background-color: #006600;
}
f. Simpan Template
g. kemudian, klik Elemen Laman, pilih Tambah Gadget, pilih HTML/JavaScript
h. copy dan pastekan kode di bawah ini :
<div id="menu_keren">
<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
</ul>
</div>
<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
</ul>
</div>
* Keterangan :
Ganti tanda # (yang berwarna hijau) dengan URL yang akan dituju, dan ganti tulisan yang berwarna Kuning dengan Kata/Tulisan yang akan ditampilkan.
i.Terakhir klik Simpan dan lihat blog sobat untuk melihat hasilnya.
Selesaii...
4 komentar:
gan, mau tanya..
kalo misalnya mau ganti warna menunya gimana ya?
:10
gantinya nih :
#navlist a:link, #navlist a:visited{
color: #006600;
background-color: #000000;
text-decoration: none;
border: 1px solid #006600;
}
bagian #006600 diganti terserah warna apa, #000000, #006600 juga terserah..
untuk melihat kode warna html klik disini
makasih gan,
responnya cepet banget..
bakalan sering nih nongkrong disini..
hehehe,, lagi kebetulan aja gan.. :D
Posting Komentar
Blog ini DOFOLLOW
Silahkan anda berkomentar dengan sopan
Tolong jangan membuat spam atau sejenisnya.
Terima kasih.