Caranya adalah sebagai berikut :
1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Lalu cari kode : ]]></b:skin> ,lalu masukkan kode berikut diatasnya.
/* menu*/
#catmenucontainer{
height:37px;
display:block;
padding:0px 0 0px 0px;
font: 12px Arial,Tahoma,Century gothic,verdana, sans-serif;
font-weight:normal;
}
#catmenu{
margin: 0px 0px 0px 0px;
padding: 0px 0px;
height:37px;
overflow:hidden;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px 10px;
}
#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color:#ddd;
display: block;
margin: 0px;
padding: 0px 10px ;
line-height:37px;
}
#catmenu li a:hover, #catmenu li a:active {
background:#B70F0F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLMCvYk_u5hLwV_1h-vcyGGHUNfF-xXU1Lpkv9OPGBsHyaMEndYoDZN01STHp5kjgPNBtXLTl1hJJytUB6K4Uo8o2ZBj-VYSBI9OvEBpWSnNNSSV1Ui33eChfnR6Cd8MycqSq6F0NUDLo/s1600/catmenua.png) repeat-x;
color: #fff;
margin: 0px;
padding: 0px 9px ;
line-height:37px;
text-decoration: none;
border-left:1px solid #e3100e;
border-right:1px solid #e3100e;
}
#catmenu li.current_page_item a {
background:#B70F0F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLMCvYk_u5hLwV_1h-vcyGGHUNfF-xXU1Lpkv9OPGBsHyaMEndYoDZN01STHp5kjgPNBtXLTl1hJJytUB6K4Uo8o2ZBj-VYSBI9OvEBpWSnNNSSV1Ui33eChfnR6Cd8MycqSq6F0NUDLo/s1600/catmenua.png) repeat-x;
border-left:1px solid #e3100e;
border-right:1px solid #e3100e;
color: #fff;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#363737 ;
width: 150px;
color: #bebebe;
font-weight: normal;
float: none;
margin: 0px;
padding: 0px 10px ;
line-height:30px;
border-bottom:1px solid #212121;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:#4a4a4a;
color: #fff;
padding: 0px 10px ;
line-height:30px;
border-left:none;
border-right:none;
border-bottom:1px solid #212121;
}
#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 5px;
background:#212121 ;
}
#catmenu li li {
}
#catmenu li ul a {
width: 140px;
}
#catmenu li ul a:hover, #catmenu li ul a:active {
}
#catmenu li ul ul {
margin: -36px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover1 ul ul, #catmenu li.sfhover1 ul ul ul {
left: -999em;
}
#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover1 ul, #catmenu li li li.sfhover1 ul {
left: auto;
}
#catmenu li:hover, #catmenu li.sfhover1 {
position: static;
}
/*Page menu*/
#foxmenucontainer{
height:36px;
display:block;
padding:0px 0 0px 0px;
font: 12px Arial, Tahoma,Century gothic,verdana, sans-serif;
font-weight:normal;
float:left;
width:1000px;
background:#B70F0F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifuFKNVV9Psves1oifX11Y8oObGPwwkIs7Y8ZMRNFheJyFQ4DtlLF05c_0_rXY4OLqYlLZtCasO7Uc2zIqk47hqwm-OKEkHkIyIRBTvxzBORAUVbAwvxEQTLS2Nt4469NZgH4sObm3Ohs/s1600/foxmenu.jpg) repeat-x;
}
#menu{
margin:0px 10px;
padding: 0px;
height:36px;
overflow:hidden;
}
#menu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li a, #menu li a:link, #menu li a:visited {
color:#ddd;
display: block;
margin: 0px;
padding: 0px 10px ;
line-height:36px;
}
#menu li a:hover, #menu li a:active {
color: #fff;
margin: 0px;
padding: 0px 10px ;
line-height:36px;
text-decoration: none;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#6C0705;
width: 150px;
color:#ddd;
font-weight: normal;
float: none;
margin: 0px;
padding: 0px 10px ;
line-height:32px;
border-bottom: 1px solid #4F0200;
}
#menu li li a:hover, #menu li li a:active {
background: #970C0B;
color: #fff;
padding: 0px 10px ;
line-height:32px;
}
#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 5px;
background:#4F0605;
}
#menu li li {
}
#menu li ul a {
width: 140px;
}
#menu li ul a:hover, #menu li ul a:active {
}
#menu li ul ul {
margin: -38px 0 0 170px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul,
#menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul,
#menu li li li:hover ul, #menu li.sfhover ul,
#menu li li.sfhover ul, #menu li li li.sfhover ul {
left: auto;
}
#menu li:hover, #menu li.sfhover {
position: static;
}
7. Selanjutnya cari kode : <b:section class='main' id='main' showaddelement='no'> , lalu copy code di bawah ini dan letakkan di atasnya :
<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li class='page_item current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#' title='Sample Page'>Sample Page</a>
<ul>
<li><a href='#' title='Child Page'>Child Page1</a></li>
<li><a href='#' title='Child Page2'>Child Page2</a>
<ul>
<li><a href='#' title='Subpage'>Subpage</a></li>
</ul>
</li>
<li><a href='#' title='Sample Page'>Sample Page</a></li>
</ul>
</li>
<li><a href='#' title='About'>About</a></li>
<li><a href='#'>Archives</a></li>
<li><a href='#'>Contact</a>
<ul>
<li><a href='#' title='Profile'>Profile</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id='foxmenucontainer'>
<div id='menu'>
<ul>
<li><a href='#' title='View all posts filed under Business'>Business</a>
<ul class='children'>
<li><a href='#' title='View all posts filed under Internat'>Internat</a>
</li>
<li><a href='#' title='View all posts filed under Market'>Market</a>
</li>
<li><a href='#' title='View all posts filed under Stock'>Stock</a>
</li>
</ul>
</li>
<li><a href='#' title='View all posts filed under Downloads'>Downloads</a>
<ul class='children'>
<li><a href='#' title='View all posts filed under Dvd'>Dvd</a>
</li>
<li><a href='#' title='View all posts filed under Games'>Games</a>
</li>
<li><a href='#' title='View all posts filed under Software'>Software</a>
<ul class='children'>
<li><a href='#' title='View all posts filed under Office'>Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#' title='View all posts filed under Entertainment'>Entertainment</a>
<ul class='children'>
<li><a href='#' title='View all posts filed under Football'>Football</a>
</li>
</ul>
</li>
<li><a href='#' title='Description for featured category'>Featured</a>
</li>
<li><a href='#' title='View all posts filed under Health'>Health</a>
<ul class='children'>
<li><a href='#' title='View all posts filed under Childcare'>Childcare</a>
</li>
<li><a href='#' title='View all posts filed under Doctors'>Doctors</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
NB:
► Untuk Penempatan Kode Menunya, selain diatas Kode :
<b:section class='main' id='main' showaddelement='no'>
► Bisa Juga Diatas Kode :
<div id='crosscol-wrapper' style='text-align:center'>
► Anda Tinggal pilih, mau taruh dimana..
8. Save
♂ Good Luck ♀
Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
