Membuat Navigasi Header

LANGKAH-LANGKAH MEMBUAT NAVIGASI BAR:

Apa itu navigasi bar? Itu lho yang ada di bawah judul blog agar pengunjung dapat melihat apa saja content blog kita. Perhatikan navigasi bar blog ini!

Ya, benar! Navigasi bar pada blog ini  FUN N SMART, Tutorial Blog,……., Info Beasiswa. Bagaimana cara membuatnya?

Langkah pertama adalah copy kode berikut dan letakkan pada layout > edit html > di bawah kode CDATA[

<script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>
.chromestyle{
width: 99%;
font-weight: bold;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://photos1.blogger.com/x/blogger2/2604/6063341998323/320/823865/chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
.chromestyle ul li a:hover{
background: url(http://photos1.blogger.com/x/blogger2/2604/6063341998323/320/578414/chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " ";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

Kemudian masuk ke layout > page elements > add HTML / JavaScript dan copy paste kode berikut:

<div id="chromemenu" class="chromestyle"><ul>
<li><a href="#" title="**">$$$</a></li>
<li><a href="#" title="**">$$$</a></li>
<li><a href="#" title="**">$$$</a></li>
<li><a href="#" title="**">$$$</a></li>
<li><a href="#" title="**">$$$</a></li>
</ul>
</div>

Ganti tanda # dengan alamat posting Anda dengan cara copy paste URL link ketika posting Anda muncul. Ganti tanda ** dengan judul navigasi Anda (tidak nampak di blog). Ganti $$$ dengan judul yang akan Anda tampilkan di blog. Contoh untuk FUN N SMART di atas, penulisannya demikian:

<li><a href="http://funnsmart.blogspot.com/2010/01/fun-n-smart.html" title="Fun N Smart">FUN N SMART</a></li>