Widgets: Attractive CSS Menu Untuk Blog

Ok. Ini kali(ke kali ini?) satu lagi menu navigasi untuk blog. Lebih elegan dan menarik. Sama langkah seperti menu navigasi sebelum ini. Tak susah. Senang je.

1) Pergi ke Dashboard >> Layout >> Edit HTML dan anda cari tag </head>.

2) Copy kod di bawah dan masukkan SEBELUM tag di atas:-

<style type='text/css'>
#nav {
width:100%;
margin-left:-40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVeku1YaU6g_MMAQS5feD3-3PWr9YgBEq862NAzEmY3QsT0WQWIpXd2PsHfUmIGTU8wuKK3hbN-IyqEnAGsEMc8E5rl9tgVTJbRzyFo6L-iDAxyH8MYJfQCF3lGPkvj9DXR9CTRZr1g_1p/) repeat-x;
}

#nav li {
float: left;
display: block;
}

#nav li a {
float: left;
display: block;
padding: 12px 18px 12px 18px;
text-transform: uppercase;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_BjLWJucXeuLxuXzPakPbs08y991oOogWMFkdQITXxJkItCh5zK0UroblPkyMLK9uG7DAAlpeEmFPSdVX3b0nFBq-sOEdxCkfgvqte-JfV8Y7l99g-wzbxlXNat9-7GZYAfsKwAnX0KbU/) no-repeat top right;
color:#ffffff;
}

#nav li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_BjLWJucXeuLxuXzPakPbs08y991oOogWMFkdQITXxJkItCh5zK0UroblPkyMLK9uG7DAAlpeEmFPSdVX3b0nFBq-sOEdxCkfgvqte-JfV8Y7l99g-wzbxlXNat9-7GZYAfsKwAnX0KbU/) no-repeat right -40px;
color:#ffffff;
text-decoration:none;
}

ul#nav li.current_page_item a, ul#nav li.current-cat a {
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_BjLWJucXeuLxuXzPakPbs08y991oOogWMFkdQITXxJkItCh5zK0UroblPkyMLK9uG7DAAlpeEmFPSdVX3b0nFBq-sOEdxCkfgvqte-JfV8Y7l99g-wzbxlXNat9-7GZYAfsKwAnX0KbU/) no-repeat right -80px;
}

#nav li ul {
display: none;
}
</style>

3) Klik "Save" dan pergi ke Dashboard >> Layout >> Page Element kemudian klik "Add A Gadget" dan pilih HTML/Javascript.

4) Copy kod di bawah dan masukkan ke dalam ruang HTML/Javascript:-

<ul id="nav">

<li class="current_page_item"><a href="URL Anda">Home</a></li>

<li><a href="#" title="URL Anda">HTML</a></li>

<li><a href="#" title="URL Anda">CSS</a></li>

<li><a href="#" title="URL Anda">PHP</a></li>

<li><a href="#" title="URL Anda">MySQL</a></li>

<li><a href="#" title="URL Anda">About</a></li>

<li><a href="#" title="URL Anda">Contact</a></li>

</ul>

<div class="clear"></div>

Jika semuanya ok, klik save. Selesai.

**NOTA** Semua yang dihighlightkan berwarna BIRU hendaklah ditukar mengikut kesesuaian anda.

Untuk demo, anda boleh lihat di SINI.