How to Create Highlighting Current Page or Current Menu on Blogger

Highlighting Current Page or the Current Menu is usually interpreted as a marker for the currently active page when the user is in a certain page, for example in the pages Home, About, Help us and Contact. On Blogger itself was actually only recently been planted this feature if we are to enable a feature to page (Page). Yet somehow most bloggers, including myself, are not so interested in using. What makes I’m interested to discuss the Current Page function is because almost all of the templates I provided in zoomtemplate.com already embedded feature to display the navigation menu, unfortunately, yes it was, the menu should have such a nice even just as a decoration substitute for the link only, and mostly just looks pretty when the user mouse over (mouse hover) but has no menu features a marker that should be seen actively participating in the pages that are also active.
As an example please see the demo on Blogger Templates

There can be co-see when we are in the area of ​​the page HOME, HOME menu links are also seen actively participating. Similarly when colleagues how deep the FAQ’s page and some other menu that looks also active.
OK directly to the tutorial, yes. Oh yes, a sample menu below are not the same as the example menu in zoomtemplate.com, but colleagues can edit the menu as needed. Frankly I find it difficult to explain, because almost every CSS Menu has a unique design and berbeda.Tapi with this example I’m sure colleagues at least have some idea how to Aktive Curren Page / Current menu is working.
1. Please immediately go to the Edit HTML page
2. Put the CSS code below, right above the ]]></b:skin>
#nav ul {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOw_8megLM3sAqrYd9BVypsIfuledoZjjf5VqeJHcK4FwnQ31RtELUI5bx_IVHHr0PgiFoZVywN_W333smiAwmDpdoLZ2DP9kGP7F_Xroqn6o1p9Zs7C85iZfu0MGS48JC4QHZkF0oxDzF/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/AVvXsEiZSlX8tLvk0IGhdKBvsDhC91M9jA3Z81IHc6UEkqiidJ0IkMYuy90CnTp-3fAazZZIEyE4aJ3B_SDX1wvJV7BT8VC4ODQ2kilL1nuSdjzoC-jBoFd_xyyIKlfcRtxOMm74FGP9sqq2NDZ5/s400/current.gi) no-repeat center bottom;
color:#98CB00;
}
2. Put the following Javascript code right above </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>
3. Then please find the following code in code lines on the Edit HTML
<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>
Then put the following code right above the code above.
<div id=’nav’>
<ul>
<li><a href=’/'>HOME</a></li>
<li><a href=’#‘>FAQ’S</a></li>
<li><a href=’#‘>HELP US</a></li>
<li><a href=’#‘>CONTACT</a></li>
</ul>
<script language=’javascript’>setPage()</script>
</div>
In order to effect Current Page / Menu to work, his colleagues will have to replace the # sign above the url address of an active post.
To create and edit the menu display is much more beautiful than the example above menu colleagues should inevitably have much to learn HTML coding, CSS and Javascript.