Cara Mudah Membuat Widget Menu Navigasi

Masih membiacarakan menu navigasi?...nih gan ada yang gampang membuat menu navigasi dengan efek hover dalam bentuk widget, jadi anda tidak usah repot-repot edit html. Ok langsung saja menuju lokasi.

Demo

• Beranda
• Kontak
• Facebook
• Twitter
• RSS Feed

Log in ke blog anda
Klik Rancangan

Klik Tambah Gadget

Pilih HTML/JavaScript

Masukkan kode berikut ke dalamnya

<style type="text/css">
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}
.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>

<div class="hovermenu">
<ul>
<li><a href="http://masukkan alamat blog anda di sini">Beranda</a></li>
<li><a href="http://masukkan alamat kontak anda di sini" target="_blank">Kontak</a></li>
<li><a href="http://masukkan alamat facebook anda di sini" target="_blank">Facebook</a></li>
<li><a href="http://masukkan alamat twitter anda di sini" target="_blank">Twitter</a></li>
<li><a href="http://masukkan alamat RSS FEED anda  di sini" target="_blank">RSS Feed</a></li>
</ul>
</div>

Klik Simpan dan kini anda sudah memiliki menu navigasi sederhana yang tidak kalah menarik tampilannya.  Selamat Mencoba dan Sukses Selalu