Home » » Light Hover Horizontal Menu With CSS For Blogger

Light Hover Horizontal Menu With CSS For Blogger

Membuat sebuah menu horizontal yang di sisipi effect jQuery, saat Kursor mouse menyorot menu ini, maka salah satu menu ini akan terselip atau berjungkir balik secara otomatis :

Cara membuat nya yaitu sebagai berikut :

1. Login Blogger
2. Pilih Rancangan ---> EDIT HTML
3. Kemudian Cari kode:
<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>

4. Simpan kode berikut di bawah kode di atas(Sesuai tema blog anda):
<ul class='v2' id='topnav'>

<li><a href='#' title='HOME'>HOME</a></li>

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

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

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

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

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

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>
NB: Yang berwarna biru # (alamat link) MENU 3 (nama menu) Silahkan ganti sesuai keinginan..

5. Selanjutnya cari kode ]]></b:skin> dan simpan script berikut diatasnya:
 
<style type='text/css'>
#nav {
width:100%;
margin-left:-40px;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/S0b_iTEmRGI/AAAAAAAAAlc/zRdPcwzXDo4/mainbg.jpg) 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>
6. Save
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .