Cara Membuat Atractive CSS Horizontal Menu

Widget ini cara kerjanya sama denganyang lain, namun beda tampilan dan lebih atraktif dan lebih singkat cara membuatnya. Yang jelas tidak kalah tampilannya dengan lainnya. Sekarang mari kita bahas bagaimana cara membuat atraktive CSS horizontal menu. Ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<style type='text/css'>#nav {width:100%;margin-left:-40px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdX-qOpQKBj5BnWbZbmaRHrTMEkX2YpbxB5Y_zsesbtyYv-vGsIhudauuTCo8G3HCi3mH77Le_Iy2bRhkcqbIPP1qRcCY-w7fSsap3jMNsIVONz0Fw7sgDnXbJV4o9lfW3f36wj3c9ZEy_/) repeat-x;}
#nav li {float: left;display: block;}
#nav li a {float: left;display: block;padding: 12px 18px 12px 18px;text-transform: uppercase;text-decoration:none;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOoV9VGtfOVwU5kNWLrom8-Sl_uJQuPz0MRAeqPW8D8oUWrsHrZZ8lFcrVymtuHi20xpHj6RIwUMskbUw7pA6GC2RC7t770gYLfbi4-FtkcoE_cgJUGDVDwR3rX3SmfIRQl1AkqnOkp8d/) no-repeat top right;color:#ffffff;}
#nav li a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOoV9VGtfOVwU5kNWLrom8-Sl_uJQuPz0MRAeqPW8D8oUWrsHrZZ8lFcrVymtuHi20xpHj6RIwUMskbUw7pA6GC2RC7t770gYLfbi4-FtkcoE_cgJUGDVDwR3rX3SmfIRQl1AkqnOkp8d/) no-repeat right -40px;color:#ffffff;text-decoration:none;}
ul#nav li.current_page_item a, ul#nav li.current-cat a {color: #fff;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOoV9VGtfOVwU5kNWLrom8-Sl_uJQuPz0MRAeqPW8D8oUWrsHrZZ8lFcrVymtuHi20xpHj6RIwUMskbUw7pA6GC2RC7t770gYLfbi4-FtkcoE_cgJUGDVDwR3rX3SmfIRQl1AkqnOkp8d/) no-repeat right -80px;}
#nav li ul {display: none;}</style>

Selanjutnya klik Simpan Template
Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<ul id="nav">
<li class="current_page_item"><a href="MASUKKAN ALAMAT BLOG ANDA">Home</a></li>
<li><a href="MASUKKAN ALAMAT LINK ANDA" target="_blank" title="JUDUL">HTML</a></li>
<li><a href="MASUKKAN ALAMAT LINK ANDA" target="_blank" title="JUDUL">CSS</a></li>
<li><a href="MASUKKAN ALAMAT LINK ANDA" target="_blank" title="JUDUL">PHP</a></li>
<li><a href="MASUKKAN ALAMAT LINK ANDA" target="_blank" title="JUDUL">MySQL</a></li>
<li><a href="MASUKKAN ALAMAT LINK ANDA" target="_blank" title="JUDUL">About</a></li>
<li><a href="#" title="#">Contact</a></li>
</ul>
<div class="clear"><li><a href="http://blogonol.blogspot.com/" target="_blank" title="blogonol">blogonol</a></li></div>

Ganti tulisan merah dengan judul anda
Semua link, kecuali Home akan terbuka di jendela baru (new tab). Bila anda ingin membuatnya tetap terbuka di jendela yang sama (same windows) hapus kode target="_blank"
Selanjutnya klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu
Thank to blogger tips and tricks for scripts

"keep spirits and do the best"