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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1URPBgOu75uJJmNHIHQrZtW1RUzrAgo_bmNHpA3Aruj4gS0PhlFXVvuHcaoM1T29q8otg4W5RBzubU3KaNohxCVJGRDu5rrc_yHkTt2EL79T8pYkPtu9tx7rlKSvpWkUk-X3KAD_NRgE/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7RUiXJIzKmD8GsBNZWFcxr88gn1vr_YSEqPAiXMR-q2kIP9X9DHZk4mHc241pk6f9Oti-sP61hN3SUwlaAlOieRvcdRpaPva4DopvuvEl5e1rOA5aRUA5Y_Wvq2rM0fAzWgXdAYWCB0Q/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.