How to Add Pages In Your Blog

Ever wonder how people add pages in their blog? You know, the little menu buttons that go across the top of their blog like I have? Well, wait no longer, one of the biggest blogging secrets is revealed to you today!

A navigation menu bar at the top of your blog is really easy for you to do. Just follow these simple steps and you'll be all set.



Htmlize!

The first thing we need to do is insert the html code that will allow us to create a space in blogger for our new nav bar. This is a 2 step process. To do this, click on Layout, then Edit Html. As always, save a copy of your template before you edit it!



Step 1: Copy and paste this code directly under your "Header" Section:

#newnavbar ul li{ list-style-type: none; display:inline; margin:0px; padding:10px; border:0px solid; }

Step 2: Find this section in your html, and change showaddelement='no'to 'yes'. (Hint, Press Control+F and type in "cross" to find this part).

<div id="'crosscol-wrapper'" style="'text-align:center'"><b:section class="'crosscol'" id="'crosscol'" showaddelement="'yes'">

You can follow these steps in a handy visual I have created for you.

Linkize!

The next thing you need to do is to link your pages together. To do this, click on Layout, and then Page Elements. You should see that you now have a new "Add a Gadget" element under your header and above your blog posts. This is where the magic happens! Click on your new Add a Gadget button, and choose the Html/Javascript option. Next copy the following html and paste it into your html/javascript option.

<div id="newnavbar"><ul><li><a href="URLOFFIRSTPAGE"><img src="URLOFFIRSTPAGEIMAGE" /></a></li><li><a href="URLOFSECONDPAGE"><img src="URLOFSECONDPAGEIMAGE" /></a></li><li><a href="URLOFTHIRDPAGE"><img src="URLOFTHIRDPAGEIMAGE" /></a></li><li><a href="URLOFFOURTHPAGE"><img src="URLOFFOURTHPAGEIMAGE" /></a></li><li><a href="URLOFFIFTHPAGE"><img src="URLOFFIFTHPAGEIMAGE" /></a></li><li><a href="mailto:YOUREMAILHEREIFYOUWANTANEMAILBUTTON"><img src="URLOFEMAILIMAGEORERASETHEWHOLEEMAILOPTIONIFYOUDONTWANTIT" /></a></li></ul></div>

Here's another visual to help keep you on track.

Customize!

Create your Menu Buttons

Here's what you need to do to customize the above html code. First, you need to create images of your menu buttons like these ones. Make sure they aren't too large (right-click and click on properties to see my image size). Next, as always, you need to host your images on the internet. Make note of the URL of the image. It will be placed in the img src "URLOFFIRSTPAGEIMAGE" location.

Use your Own Labels

At the end of every post, blogger gives you a choice to add "labels for this post". This is blogger's way of organizing your posts into categories. All you have to do is label your posts in the way you want your pages to appear. For example, all my "Giveaway" posts have the label "giveaway". All my "Headers" posts have the label "headers". All you have to do is to record the URL for that specific label of posts and place it under the "a hef="URLOFFIRSTPAGE" html code above.



Another Example

I want a menu button for my Giveaways. I have labelled my giveaway posts with "Giveaway" and when I click on the label "Giveaway" (found where my blog categories are in the left sidebar), I am given this URL: http://tututina.blogspot.com/search/label/giveaways. I will then use that URL to replace the a href="URLOFFIRSTPAGE" in the html I've given to you. Following that URL, I want to add my giveaway button that I've created and change img src "URLOFFIRSTPAGEIMAGE" to img src "http://tututina.com/images/blogmenugiveaways.jpg". I would do that for each menu item I'd like to add! That's it! It seems like a lot of steps but once you have the basic idea, you can turn your blog into a full functioning website (for free!)



*If you rather not connect your menu with labels, you can always connect them with other websites you've made, including another blog URL that is devoted to one topic only (ie-Backgrounds).

**The html I've provided you with has room for 5 menu buttons plus one email button. If you want to add more or less, simply copy more or erase some to have less.

***Don't forget to adjust the spacing (padding) of your menu items if you find they are too close together or too far apart - I've shown you how to do this in the diagrams above. Enjoy!