Tim Van Damme Inspired by Tim Vand Damme

Pengikut

Network


ShoutMix chat widget

Buku Tamu

Blog

9 Jun 2011

Menu Navigasi Horizontal Simple Black CSS

Menu Navigasi di Blogspot memang bermacam macam , salah satunya adalah Menu Navigasi Horizontal. menu ini juga banyak variasi warna, namun kali ini kita akan membahas yang berwarna hitam yaitu : Menu Navigasi Horizontal Simple Black CSS. maaf saya tidak bisa memberikan demo karena sibuk, langsung aja ke tutrialnya :

Berikut adalah langkah langkah membuat menu navigasinya :

Login ke blogger - Rancangan - Edit Html , kemudian cari kode ]]></b:skin>  kemudian taruh kode berikut diatasnya :

ul#menu {width: 100%;height: 43px;background: #FFF url("http://1.bp.blogspot.com/-DuGYqFkJQs4/Tcuap0ixU7I/AAAAAAAAAdw/0KO6hmh7-yM/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}
ul#menu li {display: block;float: left;margin: 0 0 0 5px;}
ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}
ul#menu li a.current {color: #FFF;background: #FFF url("http://2.bp.blogspot.com/-t9vkEKC1ATA/TcuW-EFUaoI/AAAAAAAAAdg/zg6gbrI9u9A/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}
Lalu Save Template.

Langkah selanjutnya buka Tata Letak - Add Widget - Html/Javascript lalu copy paste kode berikut :

<ul id="menu">
<li><a class="current" href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Olahraga</a></li>
</ul>
Silahkan anda edit sendiri, jangan lupa simpan.
semoga tutorial membuat Menu Navigasi Horizontal Simple Black CSS berguna.

0 komentar:

Posting Komentar


Only CSS and Jquery Design by Insight © 2009

This template is brought to you by : allblogtools.com | Blogger Templates