Make Highlighting Current Page or Current Menu on Blogger

Highlighting Current Page or Current Menu is usually interpreted as a marker for the current active page when the user is in a particular page, say 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). But for some reason most bloggers including myself are not so interested in using.

What makes I'm interested to discuss this Page Current function because almost all the templates that I provide on this site is embedded feature to display the navigation menu, unfortunately, yes it was, the menu should be good even as simply as a decoration substitute for links only, and mostly just look beautiful when users mouse over (mouse hover) but has no marker features that the menu should look actively participating in the page that are also active.

As an example please see the demo colleagues on this site.

There we can see when colleagues are in the area of ​​the page HOME, HOME menu link is also seen to participate actively. Neither time colleague's how the FAQ page and a few other menu that looks also participate actively.

Let it easier to learn please Download Demo Menu examples I've designed here. 

OK directly to the tutorial course yes. Oh yes, the example below the menu are not the same as sample menus on this site, but colleagues can edit the menu as needed. Frankly I trouble to explain it, because almost every code CSS Menu has a unique design and berbeda.Tapi with this example I'm sure colleagues at least have little 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 just above the code ]]></b:skin>
 

#nav ul {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-bXXHNioDfKFe6zcz4SKIne7Cmy65Nd663wvd6j8CQPhp6-YZVm3oyzcb5NJEgrQ1Sm5lcI7Yhg_5wvQNyvBp9330a5C4tDRDK4nKp3Ec46eVseTGfjCe40NaRm6t2zyo580lhuFhFSb/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/AVvXsEioNc-9ppsAY-onqug1EePui9Ai8vu7y9kSkPNIJfJTQ5ylJGRxmQzEJ3WFOHu93x_qDF20_3AUiVxyX3FKb-gcFCHxloh9V-mq8srbTMaIk6smG7rlw-5304mVgttgcJs1LKdfrcaaniGZ/s400/current.gi) no-repeat center bottom;
color:#98CB00;
}

2. Put the JavaScript code below just above the code </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 the line of code in Edit HTML page

<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>

Current Stock for Page / Menu to work, colleagues must replace the # above with an active post the url address.

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.

Related Articles