Make a navigation bar with automatic highlight current links

here is the image of navigation bar in my blog :



to make a navigation bar with automatic highlight current links ,there are a lot of tutorials in internet ,they can use CSS ,PHP or Javascript for making .
In this post ,I will tell you the way I did in Blogger . Blogger has some its own functions and statements , base on them ,you can make a navigation bar for your site ,easy and simple .
At first , I will explain the idea come with making this navigation bar in blogger ,after that ,I will show you step by step .
In blogger ,there are a widget called Linklist ,you can find this widget in widget list . This widget is a default widget of blogger ,and it help you create a link list in your blog ( or Blogroll as usual) .You add it to your blog and create a link list and then we convert this link list to a navigation bar by using CSS . After that ,we add some javascript to highlight current link . This script will get url of the current page which is being opened in browser and check it with links in link list . If url of current page and link in link list are the same , it will highlight the link in navigation bar .
Clear ?
let's start .

1,Go to your blogger account . Login . Go to Layout --->Page elements .

2,In page elements ,you can add a widget to where you want by click on Add a widget

In the list of widgets ,choose Linklist :


3,Giving basic style to the navigation .
All link list widget is under class .Linklist . So ,to styling the link list and make it look like a navigation bar , you need to giving some CSS to class .Linklist .Like this :

.Linklist {

float:left;
background:#fff;
color:#000;

border:1px solid #ddd;
height:30px;

width:980px;

}
.Linklist ul,li

{

list-style-image:none;

list-style-position:outside;

list-style-type:none;

}

.Linklist li {

border-right:1px solid #DDDDDD;

float:left;

height:30px;

line-height:30px;

padding:0 10px;

}

.current-cat {

background:#ddd none repeat scroll 0 0;

}

4,Add this code after ]]></b:skin> :

<script type='text/javascript'>
function currentpage (url,current,name) {
var name = name ;
var url = url;
var current = current;
if (current == url) {
document.write (&#39;&lt;li class=&quot;current-cat&quot;&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
}
else {
document.write (&#39;&lt;li&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
}
}
</script>

5,Go to layout ,continue to edit HTML . Check expand widget templates ,and search for this code :
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

and replace for the following code :

<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<ul>
<b:loop values='data:links' var='link'>
<script type='text/javascript'> currentpage(&quot;<data:link.target/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:link.name/>&quot;); </script>

</b:loop>
</ul>
</b:includable>
</b:widget>

Save template . Ok ,you are done

How to add link to page navigation :
In Page elements , Click on edit link in Linklist widget


add your link url at New Site URL and title for it at New Site Name

A little note for adding link to a label page in this page navigation :
Link to page of a specific label is like this :
http://....../search/label/labelname
when you add link ,in New Site URL box , do not include slash at the end of label's page link :
it is : http://....../search/label/labelname
Not : http://....../search/label/labelname/
because if a label page is being opened ,its current url is only
http://....../search/label/labelname
so if you enter this link to New site URL box :
http://....../search/label/labelname/
this two links are not the same when compare ,so current page link in page navigation can't be highlighted .