Menu Horizontal Css dengan Drop Down yang Cantik Menarik

Monday, March 15, 2010

Menu Horizontal banyak sekali yang menarik hati, jika ada sahabat yang ingin menu Horizontal seperti blog ini caranya sebagai berikut :

1.Masuk Atau Log In --> layout- -> Edit HTML
2.Cari kode</head> tag .
3.Coppy dan pastekan kode di bawah ini taruh di atasnya kode </head> tag.

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Md4MrLXalr0SxP9DGo-HdBhz4-c0YtcbZlkY5PJJFAfGkrHzEc3WVXgt5K_b373VCVoUIrbqXsQJi96fNIULd9bJLBnXkU5GkNuXSKgeZsSXAx2vuT6DXLG1FAbqkuU_O0hclXf-PPwa/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}

#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#catmenu  a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#catmenu  a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBkelNLb1LP14MACGQ84mFrQnyhRrUFoQgBhZ7lG9tb2rj6Y5B1PyDDhq152KEDcV8uBlj5UkAz172-zh7F7wVNSS0Xmil5knPgqj456CGIL1bRP3U2fJz7vNlKt15U5ZC3rKtPggALJq3/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#catmenu  li {
float: left;
margin: 0px;
padding: 0px;
}

#catmenu  li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Md4MrLXalr0SxP9DGo-HdBhz4-c0YtcbZlkY5PJJFAfGkrHzEc3WVXgt5K_b373VCVoUIrbqXsQJi96fNIULd9bJLBnXkU5GkNuXSKgeZsSXAx2vuT6DXLG1FAbqkuU_O0hclXf-PPwa/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}

#catmenu  li li a:hover, #catmenu  li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBkelNLb1LP14MACGQ84mFrQnyhRrUFoQgBhZ7lG9tb2rj6Y5B1PyDDhq152KEDcV8uBlj5UkAz172-zh7F7wVNSS0Xmil5knPgqj456CGIL1bRP3U2fJz7vNlKt15U5ZC3rKtPggALJq3/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}

#catmenu  li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#catmenu  li:hover ul {
left: auto;
display: block;
}

#catmenu  li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

4.Klik Simpan template.
5.Kemudian Klik Layout-->Page Elements dan klik "Add a gadget".
6.Pilih "html/java script" dan coppy pastekan kode berikut, kemudian klik simpan.

<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

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

<li><a href='#' title='#'>Web Design</a>
<ul class='children'>
<li><a href='#' title='#'>HTML</a></li>
<li><a href='#' title='#'>CSS</a></li>
<li><a href='#' title='#'>JavaScript</a></li>
</ul>
</li>

<li><a href='#' title='#'>Templates</a>
<ul class='children'>
<li><a href='#' title='#'>1 Column</a></li>
<li><a href='#' title='#'>2 Column</a></li>
<li><a href='#' title='#'>3 Column</a></li>
<li><a href='#' title='#'>4 Column</a></li>
</ul>
</li>

<li><a href='#' title='#'>Subscribe</a>
<ul class='children'>
<li><a href='#' title='#'>Email</a></li>
</ul>
</li>

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

<li><a href='#' title='#'>Google</a>
<ul class='children'>

Selesai dan lihat hasilnya seperti gambar di bawah ini :

Anda Sudah Baca Yang Ini? :

daftar isi blog

title

css

template

news

tip hari ini

7 komentar:

Klik Here To Show All Comment

Upex, Monday, March 15, 2010 9:40:00 PM: Coba dulu ahhh... Thanks dek...
Ali Munandar, Monday, March 15, 2010 9:43:00 PM: wah bagus neh menunya, boleh di coba kyknya....
Ivan Kavalera, Monday, March 15, 2010 10:14:00 PM: Makasih banyak mas tutorialnya. Baru saja aku cob a dan berhasil di template baruku. Tapi, kok sulit banget bikin related post di template baruku ya mas?
Wawan Kurn, Tuesday, March 16, 2010 1:22:00 AM: Makash kak!
Semoga kak trus mberikn plajrn2 yg brharga.!
Anonymous, Tuesday, March 16, 2010 8:08:00 AM: Wah ini yang aku cari .. minta izin untuk menggunakannya...di blogku yang lainnya. Trims ya...:D
Rizkyzone, Tuesday, March 16, 2010 5:00:00 PM: kayanya keren nih de' kapan2 mas coba yah
Mr. X, Thursday, March 18, 2010 10:08:00 PM: @ Terima kasih atas komentarnya, semoga di update google page rank semu bisa naik pr nya.