Cara Membuat Menu Horizontal CSS Black

Hallo sobat kali ini Fahmi-Artcollection bakalan kasih tau Cara Membuat Menu Horizontal CSS Stripped Red Blogger atau Blogspot seperti postingan sebelumnya Cara membuat menu navigasi Horizontal  maupun Membuat menu horizontal CSS Stripped Red

masih sama. menu horizontal tetapi yang membedakan bentuknya lebih menarik lagi dengan bentuk CSS Black, 

ok sobatku langsung saja cekidott......!!!!

Cara Membuat Menu Horizontal CSS Black:

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin>
6. Jika sudah ketemu taruh kode berikut di atasnya:

Kode CSS:
ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw1QTxH1UtoNUyAtNnpjmUEr0tkZTYEdjSA0Eimoouk2WwRTBf5Kcnzp7EUZqIWmFZb3FAZvMZQAyb1OjArxuF8zV9_VCEgBqW2dcqveRrqEVGxfnEE-m2ZtOdeI8GcUxxQLR38QVey_s/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/AVvXsEggbsDcH773RKGybttpVlW86RvofSYpUIoUA02YVkKcjDYYBHCVLMCmeofnDV0iOiFHF6u9q9hazDS5xeg4tTddJZjjvxS5G5YM3WS5Wg_-LRyp5vZL5I1zPV113rdYooR8b1dXOU_2Fd4/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}


3. Save template.
4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, About Me, Contact Me , dan lain-lain dengan anchor text yang diinginkan.


Kode HTML:
<ul class="menu red">
<li class="current"><a href="#(url homepage anda)">Home</a>
</li><li><a href="#">About me</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Guest Book</a></li>
<li><a href="#">Link Exchange</a></li></ul>