How to Make Menu for Blogspot

Some people maybe wonder, how to make horizontal tab menu like in my site. But you'll never find any tools for make it inside blogspot. But it doesn't mean you can't make it. We can make it! How? Here you are..

Just for knowledge...

We'll make horizontal menu that it means every time you click one of the menu.. it'll go to recent page that sometimes we think it new page. But we'll not make new page, just new post. In another word we just make somelinks (shortcuts) to our post from the menu :) . But dont worry... it will be nice :)

Let's make it :

For example, we wanna make menu for Home, Download and Tutorial. So you have to make posts with title Home, Download and Tutorial. Publised it all then. We won't the pages showed and they mixed with our new posts recently, so in Options [bellow of compose box] changed the date. :) It is better to change it to older date. Then get the URL of each post. For example : http://yourblogspot.blogspot.com/2008/06/home.html, http://yourblogspot.blogspot.com/2008/06/download.html, http://yourblogspot.blogspot.com/2008/06/tutorial.html

Yup we'll go to the next steps...
Till here we'll need external help. Go to List-O-Matic. Follow the steps till you got 2 types of code; html and css. For example :

here is the html for the list :
<div id="navcontainer">
<ul id="navlist">
<li><a href="http://nama.blogspot.com/depan.html">Depan</a></li>
<li><a href="http://nama.blogspot.com/tentang.html">Tentang</a></li>
<li><a href="http://nama.blogspot.com/portofolio.html">Portofolio</a></li>
</ul>
</div>

copy the html code and from Layout >> Add a page element - html/javascript and after press save, place it wherever you like.

Here is the CSS for this list:
#navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

For css code,, copy it and put it in Layout >> Edit Html then paste it before code ]]></b:skin> and save template.. :)

Finish and happy tryin' ...