Today we’re going to learn how to make a navigation bar for your blog using a very simple way to highlight current links automatically. This method is very easy and it uses only conditional tags from Blogger, so there is no need for JavaScript.
I will explain here the method and how to make a simple style for your navigation bar, I mean very simple. It’s up to you the way you want to style them, I will not go trough the basics of CSS, but if you follow this tutorial carefully you will get the idea and be able to do it in any blog.
What we are making
Check here the Live Demo of the result we are going to achieve, this is a very simple example using Blogger Minima Template, just so you understand the method.
Step 1 – Preparation
As I said, I am not going trough CSS basics and all that, What we are going to explain here is the method to get the result needed, if you understand it, you will be able to make on any blog.
We are going to apply the method on a general blog using Minima template, so quickly go to your Dashboard, create a new blog, choose Minima Template and Make 2 posts Called “About” and “Contact” with some Lorem Ipsum inside. You should get something similar to the live demo.
Step 2 – Tweaking The Cross Column Section
This step is not very important to the method, but as we are going to add the widget on our Crosscol section, we are going to tweak it so it becomes available to receive widgets.
Go to your Blog’s Dashboard > Layout > Edit HTML > Hit CTRL + F > Find class=’crosscol’, and you should get this:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
As you can notice you have these two parts on your code: style=’text-align:center’ and showaddelement=’no’, the first one make our widgets align in the center, and the second make unavailable to add any widget on your Page Elements section. So to fix it we are going to replace the whole block of code for this one:
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
Step 3 – Adding the Link List Widget
Now that we have tweaked the cross column section, we should be able to add a new widget to it, for this go to your Page Elements section, click to Add a Gadget in the section below your header.
Choose Link List from the panel, now add your links here, as you can see on the picture above, on New Site URL insert the link to your post, in the example I have used the link to my About post, and in New Site Name, the text you want on your menu. Just click Add Link to confirm. You can add as many links as wished.
Step 4 – Giving basic styles to the menu
As I said I will not go trough the basics of CSS here, so go to Layout > Edit HTML, and add the code below right before ]]></b:skin>.
/* Navigation
------------------------------------------------ */
.crosscol .LinkList ul {padding:0px;}
.crosscol .LinkList ul li {
float:left;
list-style-type:none;
margin-right:1px;
}
.crosscol .LinkList ul li a {
border:1px solid #CCCCCC;
padding:5px 10px;
}
.crosscol .LinkList ul li a:hover, .crosscol .LinkList ul li a.current {
background:#ccc;
}
Basically it will make your links align horizontally, give a nice gray border to them, and make the hover and current links have a gray background.
Step 5 – Tweaking the Link List widget
Now we need to make the Link List widget behave automatically on highlighting current links, to do this go to Layout > Edit HTML > Check Expand Widget Templates and search for the following code:
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
<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>
</b:section>
</div>
and replace for the following:
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
<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'>
<b:if cond='data:blog.url!=data:link.target'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
<b:else/>
<li><a class='current' expr:href='data:link.target'><data:link.name/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Save it, and you are done.
Some Credits
I found the solution for this tutorial when I was going to make the code for Bloggertuts, I asked my friend Aneesh and he helped me with it, thanks a lot buddy.
Final Words
The is really a handy trick, specially when we get to use the static pages feature. This will help you improve your blog’s usability and give the visitors a clue of what page are they looking at.
Don’t forget to subscribe to get our updates and follow us on twitter.
