Thursday, April 21, 2011

Tutorial Thursday: Horizontal Navigation


I had some questions on how to add a horizontal navigation on blogger. Today I'll walk you through my way of doing it.

First, put this in your CSS (between the

<head></head> tags. (Found under Dashboard > Design > Edit Html)


.horizmenu{
padding: 14px 0;
margin-left: 0;
text-align: left;}

.horizmenu li{
display: inline;
margin: 0;
}

.horizmenu li a{
padding: 3px 7px;
margin-right: 3px;
color: #232323; /* this is font color */


You can go back to this later to adjust font colour/formatting of your menu bar.

Next, change maxwidgets in your header to a minimum of 2.
<div id=header-wrapper>
<b:section class=header id=header maxwidgets=2 showaddelement=yes>
</b:section>
</div>


When you go to Dashboard > Design > Page Elements you should be able to Add a Gadget at the top (header). Click on Add a Gadget and select Html/Javascript.

This will bring up a pop-up window (widget). Put this code in the widget:
<ul class="horizmenu">
<li><a href="www.BLOGLINK.com">HOME</a></li>
<li><a href="www.BLOGLINK.com/p/about.html">ABOUT</a></li>
</ul>


Add/Edit the links to your own pages. :)

3 Comments:

Lynn {hearted girl} said...

hi Jen,

i've come over from Adrienne's space, love philter, and am lovin' the vibe going on here max amounts. i actually used to live in Toronto for 6-ish years and now in Vancouver but have many happy memories of Ontario. you are all kinds of adorable and i've enjoyed reading your tutorials especially; i finished a web development course a while back and any more learning is a keen interest. thanks for sharing your astonishing amounts of goodness.

um, how stellar are those juice boxes & heart shaped eggs from previous posts! omg, love it total.

happy week wishes, i'll be following along from now on. ♥

patience said...

it's kind of cool that you do these tutorials and don't charge or anything.

also, how much fun is it the way the girl above me writes/talks? max amounts fun i would say!

pocketwonders said...

@Lynn:
Replied on your blog ;)

@Kaitlyn:
I'm so happy everyone is actually using these tutorials! I remember when I was first teaching myself html, it was so hard to find a pretty (&clean) website to learn from. Everything was codes everywhere so I just hope that this makes it easier for people to find things. Gotta love the pastel colours too right? ;)

Related Posts Plugin for WordPress, Blogger...