Menu Horizontal Hijau dengan CSS

Tutorial menu horizontal telah banyak dikupas oleh kawan-kawan blogger. Perbedaannya hanya pada tampilan dan pelebaran fungsi dari menu itu sendiri. Kali ini saya akan share cara membuat menu horizontal hijau untuk blogspot dengan tampilan yang cantik dari paul santos blogger bin. Kelebihannya menu horizontal ini hanya menggunakan css jadi dijamin tidak memperberat loading blog anda. Baiklah, sekarang mari kita bahas cara membuat menu horizontal hijau cantik. Ikuti langkah berikut.

Log oh ke blogger
Klik Tempalate
Klik Edit HTML
Masukkan css berikut di atas kode ]]></b:skin>

nav.horizontal{}
nav.horizontal h3{padding-bottom:20px}
nav.horizontal ul{height:50px; background-image:-moz-linear-gradient(top,#93C204,#608009); background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#93C204),to(#608009),color-stop(1,#608009)); -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; border:1px solid #608009; box-shadow:5px 5px 5px rgba(0,0,0,0.25); -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.25); -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.25)}
nav.horizontal ul li{list-style:none; display:inline; float:left}
nav.horizontal ul li a{display:block; height:28px; margin:2px 6px 2px 6px; padding:15px 20px 0px 20px; font-size:12px; font-weight:bold; color:#FFF; text-transform:uppercase; text-decoration:none; border:1px solid transparent; background-image:none; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; -moz-background-clip:padding; -webkit-background-clip:padding-box; background-clip:padding-box}
nav.horizontal ul li a:hover{background-image:-moz-linear-gradient(top,#161616,#2B3615); background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#161616),to(#2B3615),color-stop(1,#2B3615)); -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; border:1px solid #A3D804; box-shadow:inset 4px 4px 4px rgba(0,0,0,0.25); -moz-box-shadow:inset 4px 4px 4px rgba(0,0,0,0.25); -webkit-box-shadow:inset 4px 4px 4px rgba(0,0,0,0.25)}

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

<nav class=”horizontal”>
        <ul>
            <li><a href=”alamat link anda di sini”>Judul 1</a></li>
            <li><a href=”alamat link anda di sini”>Judul 2</a></li>
            <li><a href=”alamat link anda di sini”>Judul 3</a></li>
            <li><a href=”alamat link anda di sini”>Judul 4</a></li>
            <li><a href=”alamat link anda di sini”>Judul 5</a></li>
            <li><a href=”alamat link anda di sini”>Judul 6</a></li>
        </ul>
    </nav>

Ganti tulisan merah dan biru pada kode di atas sesuai petunjuk
Selanjutnya klik Simpan dan tempatkan sesuai keinginan
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"