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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVUvsVgKKV2nhHBm_zNSHRs1JCrshXHa8y5e2Pt9ks7miYCtB3hBbh8Ydg75TrctlpReiEO3TBtki_Yz6KWqF97HNl3pi6FG-ys2v4w8xrYLag7Y_BJTcOimbg6jmyeVukMj9QoMj7OXK8/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px "Century gothic",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/AVvXsEgZc6rEEDDxlCeCj58VbCvX5ByM51agXxuzsFZ__MsMWaZcgArLKFb3zXU-bko50adh75Gt7B45TdqjVA-OnT-IVtb94aGRjOPtuKajF874UaFoQ3OaUyI0qVR_TKG7k_0WjoZ86zDEkKmJ/) 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/AVvXsEiVUvsVgKKV2nhHBm_zNSHRs1JCrshXHa8y5e2Pt9ks7miYCtB3hBbh8Ydg75TrctlpReiEO3TBtki_Yz6KWqF97HNl3pi6FG-ys2v4w8xrYLag7Y_BJTcOimbg6jmyeVukMj9QoMj7OXK8/) 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/AVvXsEgZc6rEEDDxlCeCj58VbCvX5ByM51agXxuzsFZ__MsMWaZcgArLKFb3zXU-bko50adh75Gt7B45TdqjVA-OnT-IVtb94aGRjOPtuKajF874UaFoQ3OaUyI0qVR_TKG7k_0WjoZ86zDEkKmJ/) 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 :
