Add Style To Your Menu With Buttons

Updated: This post is for Blogger only, so no longer applies to my WordPress theme. But instructions still hold for Blogspot blogs.

Adding A Menu Bar in Your Blogger Header explains how to create links across the top of the blog. The method was simple, using an unordered list of links in a page element. Soon after, I decided to eliminate the underlining below the links and make the items look more like menu buttons. In my search adventures I discovered the method I needed and a simple explanation to turn off the underlining.

The Web design from scratch article had some useful code that defines the toolbar styling to use with the list of links. I omitted the suggested background color definition since my header has a gray color already. You can change the “border-color:#f3f3f3 #bbb #bbb #f3f3f3;” Also use your own url references and add more or fewer list items. I made the border 2px instead of 1px and omitted the zoom. The span float tags forces the buttons to the right hand side.

The line in green turns of the link underlining without going into the template! This is how I modified the page element already defined for the menu bar:

<style type=”text/css”>
a {text-decoration:none}
.toolbar li
{
display:inline;
border:2px solid;
border-color:#f3f3f3 #bbb #bbb
#f3f3f3;
margin:0;
padding:.5em;
}

</style>
<span style=”FONT-WEIGHT: bold;
FLOAT: right;”>
<ul
class=”toolbar”>
<li>
<a
href=”http://bpwebnews.com/”>HOME</a></li><li>
<a
href=”http://bpwebnews.com/2008/08/table-of-contents-for-this-blog.html”>TOC</a></li><li>
<a
href=”http://bpwebnews.com/search/label/Blog%20Design”>DESIGN</a></li><li><a
href=”http://feeds.feedburner.com/WebNewsAndTipsFromBoldenProductions”
target=”_blank”>RSS</a></li></ul>
</span>

<!– also removed: PADDING-RIGHT: 30px;PADDING-TOP: 10px; margin-left:20px; from the previous page element –>

Here’s the result:

Next time you visit, the button names may change as I refine the post labels. Also the buttons may look better on the lower gray bar of the header or in the starry blue section. What do you think?


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


4 Comments

  1. Well, this is a milestone, and maybe a good sign, that I just received by first Spam comment! The name ‘anonymous’ was the first clue. Followed by the two web addresses for traffic generator services. I did find out how quickly Google indexes your blogspot posts — instantly! Just publish something, search for the title and it’s there! Using Feedjit I could see this visitor arrived by a Google search for “create links.” It was probaby a Google Reader subscription for that search term. Well, I’ll leave the comment just in case I’ve wrongly accused the person. If so a big apology would be in order!

  2. Your right! The above comments have to be spam, but I didn’t think they came through comment Luv. BUMMER, but at least you got that my sites still so small that spammers don’t even come lol. Anyways great post I’ve been meaning to re-design some of my blogs for awhile and found a lot of stuff on you site to be very helpful!

    Thanks and Keep Up the Good Work 🙂

  3. I’m sure you’ll get your share of spam in the near future! or at least see it in the spam folder. I’m grateful for your kind encouragement.

1 Trackback / Pingback

  1. Adding A Menu Bar in Your Blogger Header « BPWebNews

Comments are closed.