Monday, March 15, 2010

Menu Horizontal Css dengan Drop Down yang Cantik Menarik

 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 blogger dashboard--> 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(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg) 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(http://3.bp.blogspot.com/_4HKUHirY_2U/Swul3Dap3uI/AAAAAAAAAUE/DvKs0kZKwCA/catmenuhov.jpg) 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(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg) 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(http://3.bp.blogspot.com/_4HKUHirY_2U/Swul3Dap3uI/AAAAAAAAAUE/DvKs0kZKwCA/catmenuhov.jpg) 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 :
Superb CSS Menu For Bloggers

Anda Sudah Baca Yang 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?

Wawank Tuesday, March 16, 2010 1:22:00 AM  

Makash kak!
Semoga kak trus mberikn plajrn2 yg brharga.!

azis8439 Tuesday, March 16, 2010 8:08:00 AM  

Wah ini yang aku cari .. minta izin untuk menggunakannya...di blogku yang lainnya. Trims ya...:D

Rizky2009 Tuesday, March 16, 2010 5:00:00 PM  

kayanya keren nih de' kapan2 mas coba yah

khusnul Thursday, March 18, 2010 10:08:00 PM  

@ Terima kasih atas komentarnya, semoga di update google page rank semu bisa naik pr nya.

Post a Comment

newer page older page home
top