Tutorial : Menu Horizontal kiut Untuk Blog

Macamamana nak masukkan menu horizontal kiut dalam Blog kita.. contoh macam gambar kat bawah ni okeh..

Kelebihan menggunakan kaedah ini

• Tiada Imej digunakan
• Semua berlandaskan CSS
• Tak efek kelembapan loading dalam blog kita

Langkah 1 - Pergi ke Blogger Dashboard > Layout> Add a Gadget below header > HTML / JavaScript

Langkah 2 -  Masukkan kod yang diberikan seperti di bawah

Langkah 3 - Klik Save "button"

NOTA

• Gantikan # dengan url yang kita kehendaki
• Gantikan teks berwarna HIJAU dengan nama menu yang kita kehendaki
• Jika ingin kecil atau besarkan menu bar sila lakukan di sini font-size:17px;
• Untuk menambah lebih banyak menu bar copy dan paste kod seperti di bawah

        <li> <a href="#"> Option </a> </li>

PRATONTON

(Latar belakang menu bar adalah lutsinar dengan polka dot dengan border merah jambu)

CODE

<div id="nav">
<ul>
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> Products </a></li>
<li> <a href="#"> Services</a></li>
<li> <a href="#">About Us</a></li>
<li> <a href="#">Privacy Policy</a></li>
<li> <a href="#">Disclaimer</a></li>
</ul>
</div>

<style>
#nav{
position:relative;
z-index:5;
}
#nav ul {
background:white;
background: radial-gradient(pink 15%, transparent 16%),
radial-gradient(pink 15%, transparent 16%);
background: -moz-radial-gradient(pink 15%, transparent 16%),
-moz-radial-gradient(pink 15%, transparent 16%);
background: -o-radial-gradient(pink 15%, transparent 16%),
-o-radial-gradient(pink 15%, transparent 16%);
background: -webkit-radial-gradient(pink 15%, transparent 16%),
-webkit-radial-gradient(pink 15%, transparent 16%);
background-size:30px 30px;
background-position: 0 0, 15px 15px;
border:1px solid pink;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
#nav  a:link{
margin:8px 8px;
}
#nav ul:after {
content: ""; clear: both; display: block;
}
#nav ul li {
float: left;
}
#nav ul li:hover a {
background: #ffd6d6;
}
#nav ul li a {
display: block; padding: 10px 20px;
color: white; text-decoration: none;
background:pink;
font-size:17px;
border-radius:3px;
border:1px solid pink;

}
</style>