Assalamu'alaikum wr.wb.

Salam sobat blogger Indonesia. Hari ini posting saya tentang bagaimana membuat navigator macam milik saya di atas. Tak sukar rasanya untuk membuat itu. Hanya beberapa trik, misalnya menempatkan kode tersebut di bawah kode header. dengan memberi atau tidak tanda centang pada edit HTML blog sobat.
Ahhhhh.... kelamaan, okey...okey... kita mulai saja ya.

Ini adalah kode deklarasi variabel sobat. Silahkan copy dan paste tepat di atas kode ]]>.

Ini Kode yang mesti dicopy:

#navigator {
background: url(http://www.templatesimages.com/images/BoxTube/navigator.gif) no-repeat center center;
float: left;
width: 880px;
padding-right: 10px;
padding-left: 10px;
margin-top: 0px;
margin-bottom: 8px;
height: 32px;
font-family: "Trebuchet MS", Tahoma, "VAGRounded BT", Verdana;
}
#navigator ul {
float: left;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navigator ul ul {
margin: 0px;
padding: 0px;
float: left;
}
#navigator ul ul ul{
margin: 0px;
padding: 0px;
float: left;
}
#navigator ul li {
float: left;
font-size: 14px;
color: #FFFFFF;
display: inline;
font-weight: bold;
margin: 0px;
padding: 0px;
}

#navigator ul ul li {
padding: 0px;
float: left;
font-size: 14px;
color: #FFFFFF;
display: inline;
}
#navigator ul ul ul li {
padding: 0px;
float: left;
font-size: 14px;
color: #FFFFFF;
display: inline;
}
#navigator li a {
text-align: center;
padding-right: 12px;
padding-left: 12px;
color: #FFFFFF;
text-decoration: none;
text-transform: capitalize;
display: block;
margin: 0px;
height: 32px;
line-height: 32px;
float: left;
}
#navigator li a:hover {
color: #FFFFFF;
text-decoration: none;
text-transform: capitalize;
padding-right: 12px;
padding-left: 12px;
background: #292929 url(http://www.templatesimages.com/images/BoxTube/navs.gif) center center;
text-align: center;
display: block;
margin: 0px;
line-height: 32px;
height: 32px;
float: left;
}


Kemudian copy kode berikut dan letakkan tepat di bawah kode header berikut:





Ini dia kode yang harus dicopy:




Meletakkan kode navigator di bawah kode header memunculkan efek navigator berada dibawah header. Jika anda ingin navigator berada diatas header, tinggal copy saja kode navigatornya di atas kode header.

Selamat mencoba sobat.