Tuesday, June 1, 2010

How to do my Navigations

...2 Pages in 1 File as my referred tutorial would call it. :) So, some of you are asking how I did the navigations! Here's my tutorial I would like to share to you!

As you can see, my navigations are pretty similar to those HTML blogger layouts out there at blogskins! XML blogger layouts, like mine, could also have these. Again, I'm going to teach you how I do navigations like these! :D

You need to know basic HTML to understand this fully. You can go to http://www.w3schools.com/ to learn more about basic HTML.

First, in an XML layout, we would add a gadget to put on the codes for the navigation (the ones that we would click, of course): (Click the images for a bigger view)

It depends on where you want them to appear.

Choose HTML/Javascript:

Paste these codes:

Codes explained:

You can format these navigations all you want!

Save and close these, then go to Edit HTML, and locate the body:


Paste these codes into the body, after the widget codes: You can tell that they are widget codes when they look similar to these:



The Divs: Here's for THE AUTHOR



...and copy-paste more of these to create more pages (and remember to change the ID to the Page ID you desire, and also change the Page Name [like THE AUTHOR] to the page name you desire).

Here's the code to make the navigations work:

[&#39] could be translated as a single quote. "main" could be changed to the page ID where we would want the content to appear, just like mine that I would want the content to appear on the same part the blog posts appear, and its ID is "main", but in Minima layouts, it's ID would be "main-wrapper". You might tell that it's a div ID when it has this symbol just before the ID: "#". For example: "#main". These are usually located at the CSS (head) part.



You can tell that blog posts appear in that page ID when you see this code:

Save it, go to your blog, and you might see this:


When navigations are clicked, content put inside the divs appear:


And, that's it! Just change "Put content here" to the content you desire! :)

In HTML layouts, you might refer blogskins layouts on how they do it.

If you don't understand this, you can always ask me, or you may use an alternative, like those Blogger Static Pages, and you may google how to do that.

I hope you understood my tutorial! Ask me some questions here if you want clarifications!

I used my Celebrate Life's Moments blog in showing you how to do the navigations.

Well, I will make a separate post for my blabs of the day! :)

4 comments:

  1. hope your skin goes back to normal before summer ends, and school starts again

    ReplyDelete
  2. @Marinella: thanks!! :D i hope so too! :)

    ReplyDelete
  3. The content of elements must consist of well-formed character data or markup.

    vanice , help me !
    those errors are appearing . why ya ?

    ReplyDelete
  4. the errors are not appearing now , but the navigations are not working , when i click on the words , it doesn't change anything .
    :(((

    ReplyDelete

What can you say? :)

Blog Widget by LinkWithin