Highlighting Current Page atau Current Menu biasanya diartikan sebagai penanda halaman aktif untuk saat ini ketika user berada dalam halaman tertentu, misalkan dalam halaman Home, About, Help us dan Contact.Penanda tersebut bisa bermacam-macam bentuknya,ada yang ditandai dengan disoroti dengan warna,atau bentuk yang berbeda dengan page/laman yang lainnya.Jika anda tertarik dengan tutorial ini,silahkan untuk ikuti langkah-langkah berikut ini:

#nav ul {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIRVFHiQqNWFDWVGrBq6HllXykgOxZzrSnqsH8_loQQ98I4FLIE7CU6ko4dnGOxQYBQt6kAV9szoKiwMIh5BbqCo-tshmpy7_lOKtY-eDTpDbwI55IbEEYvOqU88RGGpYdcwI4pBmPq9IN/s400/backgr.jpg) repeat-x left top;
margin:0;
border-bottom:3px solid #98CB00;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
#nav li {
float:left;
}
#nav li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Trebuchet MS";
font-stretch:condensed;
text-decoration:none;
color:#00CCFF;
letter-spacing: -0.1em;
}
#nav li a:hover {
color:#98CB00;
}
#nav li.current {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4yH8q6Cxs6NtGV6PJEuF5ZSIJv93fE324Xr02jmccFOFG-Dgd_LXUin6mo-hh4BNaRd88vRYkDgeDdaI5m_mS7ER6KQSDx4MVdH5OZSBdl_pLva6D9vaQntU-lc6OjScZMB6DxYeVYiBm/s400/current.gi) no-repeat center bottom;
color:#98CB00;
}

2. Letakan kode Javascript dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

function extractPageName(hrefString)
{
var arr = hrefString.split('/');
return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}
function setActiveMenu(arr, crtPage)
{
for (var i=0; i<arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != "DIV")
{
arr[i].className = "current";
arr[i].parentNode.className = "current";
}
}
}
}
function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;

if (document.getElementById("nav")!=null)
setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}

//]]>
</script>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='nav'>
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='#'>ABOUT</a></li>
<li><a href='#'>HELP US</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
<script language='javascript'>setPage()</script>
</div>