Cara buat navigasi horizontal seperti blog ini !!!

Malam sobat Blogger^^
Ketemu lagi nih walau besok UTS.. hahaa...
kali ini aku mau posting tentang CARA BUAT MENU NAVIGASI HORISONTAL ...

(Klik untuk memperbesar gambar )

Postingan ini sebenernya ada yang request dari kotak komentar

( Klik untuk memperbesar Gambar )

Yang Request namanya Dhenyzt Hertanto | CheraGakure™ ...

Go To TKP *Checkidoott*

[•]Login Blogger Account..
[•]pilih template..
[•]pilih lagi edit template..
[•]centang expand widget template
[•]cari kode ]]></b:skin> (kalo susah pake CTRL+F)
[•]copy kode di bawah ini di atas kode tadi ( ]]></b:skin> )

#catmenucontainer{
height:37px;
display:block;
padding:0px 0 0px 0px;
font: 26px Tulpen One,arial,serif;
font-weight:bold;
}
#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:#ccc;
display: block;
margin: 0px;
padding: 0px 10px ;
line-height:37px;
}
#catmenu li a:hover, #catmenu li a:active {
background: #000;
color:black;
margin: 0px;
padding: 0px 9px ;
line-height:37px;
text-decoration: none;
}
#catmenu li.current_page_item a {
color:gold;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:white;
opacity:.8;
width: 150px;
color:black;
font-weight: normal;
float: none;
margin: 0px;
padding: 0px 10px ;
line-height:30px;
border-bottom:1px solid #000;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:gray;
opacity:.8;
color:black;
padding: 0px 10px ;
line-height:30px;
border-left:none;
border-right:none;
border-bottom:1px solid #fff;
}
#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 5px;
background:transparent ;
}
#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: 16px Tulpen One,arial,serif;
font-weight:normal;
float:left;
width:950px;
background:transparent;
border-top:1px solid #000;
border-bottom:1px solid #000;
}
#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:#fff;
display: block;
margin: 0px;
padding: 0px 10px ;
line-height:36px;
}
#menu li a:hover, #menu li a:active {
color:red;
margin: 0px;
padding: 0px 10px ;
line-height:36px;
text-decoration: none;
border-left:1px solid #000;
border-right:1px solid #000;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:white;
opacity:.8;
width: 150px;
color:#000;
font-weight: normal;
float: none;
margin: 0px;
padding: 0px 10px ;
line-height:32px;
border-bottom: 1px solid #212121;
}
#menu li li a:hover, #menu li li a:active {
background:black;
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:transparent;
}
#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;
}

[•]kalo udah simpan template atau mau di Edit lagi kode nya, silahkan !!! tapi [•]jangan lupa save yaa !!!
[•]sekarang KEMBALI KE LAPTOP *eh salah..,, maksudnya kembali ke halaman utama...
[•]pilih menu Layout..
[•]Tambah gadget >> HTML/JavaScript
[•]copy kode di bawah ini

<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li class='page_item current_page_item'><a expr:href='#' title='home'></a></li>
<li><a href='#' title='tooltip test'>Judul</a><ul>
<li><a href='#' target='_blank' title='tooltip test'>Judul</a></li>
<li><a href='#' target='_blank' title='tooltip test'>Judul</a> <ul>
<li><a href='#' target='_blank' title='tooltip test'>Judul</a></li> <li><a href='#' target='_blank' title='tooltip test'>Judul</a></li> </ul>
</li>
</ul>
</li>
<li><a href='#' target='_blank' title='tooltip test'>Judul</a></li><li><a href='#' target='_blank' title='tooltip test'>Judul</a></li><li><a href='#' target='_blank' title='tooltip test'>Judul</a></li><li><a href='#' target='_blank' title='tooltip test'>Judul</a></li><li><a href='#' target='_blank' title='tooltip test'>Judul</a></li><li><a href='#' target='_blank' title='tooltip test'>Judul</a><ul>
<li><a href='#' target='_blank' title='tooltip test'>Judul</a></li><li><a href='#' target='_blank' title='tooltip test'>Judul</a></li></ul>
</li>
</ul>
</div> </div>

[•]Keterangan tambahan :
# >> URL / Link yang ingin digunakan
tooltip test >> preview text saat di sorot mouse
Judul >> pasti udah tau lah..
Hijau >> itu menu dropDown nya
Biru >> itu menu tambahan
[•]Letakkan di Header
[•]Terakhir save lagi dan lagi.. haha

Tambahan >> Bagi yang tidak bisa menambahkan widget di bawah header ikuti tutor ini yaa...

[•]login account Blogger
[•]klik template
[•]klik edit html
[•]centang expand widget template
[•]cari kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
[•]ganti angka 1 tersbut dengan 2 atau 3 ata bisa juga 4 dan seterusnya kalo perlu..wkwk