Adsense Link 728 X 15;

Cara Mudah Membuat Widget Menu Navigasi

Posted by Tips Trick Blogger Thursday, April 21, 2011 0 comments
Adsense Content. recommended 336 X 300
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


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


"keep spirits and do the best"
Adsense Content. bottom of article

0 comments:

Post a Comment