Light Hover Horizontal Menu With CSS For Blogger

Bissmillah... Light Hover Horizontal Menu With CSS For Blogger. Postingan kali ini saya akan mencoba memberikan tips tentang menu blogger. Judul yang saya ambil adalah Light Hover Horizontal Menu yang berarti Menu Mendatar / Horizontal yang akan mengkilap saat di sorot oleh kursor.

Sebelum ke tahap pembuatan saya akan memperlihatkan DEMO PREVIEW untuk Light Hover Horizontal menu ini, silahkan KLIK button Dibawah ini :



Untuk membuatnya silahkan kalian ikuti tahapnya dibawah ini :

1. Login Ke Blogger Kalian
2. Pilih Rancangan
3. Pilih Edit HTML
4. Simpan CSS berikut diatas kode </head>

<style type='text/css'>
#nav {
width:100%;
margin-left:-40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqMOVQZnlQ9gdlNjvtZ4IbqRnwLg3891K5E7aIa6Z-BBTMw6t72i38Roy1ZKg27AS-pH0wSrI3CiC_yLmzcEJ7HfOKtkBTTrF1W9ArIM3ZnRBwG7MmqP1H8pIB1mLC6HsBbAUAPLnBJNhW/) 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(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat top right;
color:#ffffff;
}

#nav li a:hover {
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -40px;
color:#ffffff;
text-decoration:none;
}

ul#nav li.activee a, ul#nav li.current-cat a {
color: #fff;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -80px;
}

#nav li ul {
display: none;
}
</style>

5. Sekarang kalian cari kode berikut :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

catatan :
Untuk penyimpanan menu ini, kalian tidak diharuskan/diwajibkan menyimpannya dibawah kode diatas saja, kalian bisa menyimpannya ditempat yang sesuai dengan template kalian.

6. Simpan kode berikut setelah kode diatas

<ul id='nav'>

<li class='activee'><a href='/'>Home</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 1</a></li>

<li><a href='#' title='MENU 3'>MENU 2</a></li>

<li><a href='#' title='MENU 4'>MENU 3</a></li>

<li><a href='#' title='MENU 5'>MENU 4</a></li>

<li><a href='#' title='MENU 6'>MENU 5</a></li>

</ul>

Keterangan :
Silahkan ganti kata MENU diatas dengan Menu yang akan kalian tampilkan, jangan lupa juga mengisi link yang akan dituju oleh menu kalian.

Contoh :

<li><a href='http://www.z33s.co.cc/' title='My Blog'>Blog Tutorial</a></li>

7. SimPAN template kalian

Semoga bermanfaat dan Terima kasih

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.