How to Make a Horizontal Menu for Blogger

Creating horizontal menu will give advantage to link to your other blogs or sites. Link back to one blog to other has advantage.

Here's a simple steps to add your horizontal menu:

1. Log in to Blogger.
2. Go to Dashboard, click Layout> Edit HTML.
3. Check the "Expand Widget Templates" box.
4. Find the code: /*Header*/.
5. Add this code below /*Header*/.

#menu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#menu li a{
color:#dfffed;
}

#menu li a:visited {
color: #57E964;
}

#menu li a:hover {
color: #F88017;
background: #ffff66;
}

6. Find b:section class='header' id='header' maxwidgets='1' showaddelement='no'

7. Change to b:section class='header' id='header' maxwidgets='4' showaddelement='yes'

8. Click Save Template.

Next, we have to add some page element to our header. As you notice, you can now add page element to your header.

1. Click Lay out> Add Page Element
2. Do not put title. Then add the following code:

<div id='menu'>
<ul>
<li><a href="Your URL">Home</a></li>
<li><a href="Your URL">Advertise</a></li>
<li><a href="Your URL">About Me</a></li>
</ul></div>


3. You can edit and add your desired URL on the field mark in red.

NOTE: You can edit the codes we inserted on Number 5 on whatever color or background and the margins of your menu to fit on your blog.

Cheers! Its Done. Leave comment.

Posted in: Making Horizontal Menu for Blogger