Tuesday, August 18, 2009

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.

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:

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).

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

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.

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

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!


vivapinay said...

This is what I am waiting for! I super love your latest blog tricks. Blog Fairy.. :)

Undercover ninja said...

I love your blog!!!

Where do I find the image SRC to place my button?


Mandi @ Finding Home said...

I can't wait to try this on my blog. I've really been wanting to do it. Now I just need the time. Love it, Tina!! :)

Marice said...

hey sissy.. thanks for this.. i wanted to have this! but i still couldnt decide how will i do my buttons.. can u be of help? :)

tututina said...

viva- you're welcome! Have you been able to try it out yet?

Ninja- the IMG SRC is where your pictures are located on the web. It needs to be hosted somewhere. When it is hosted online, you are given a URL for it. It should end in a .png, .jpg or .gif in most cases. If you don't have webspace, you can get a free account at www.webs.com . Sign up and upload your pictures from your computer to their webspace. A sample of the URL would be http://www.YOURSITE.webs.com/YOURPICTURE.jpg

mandi- Thanks for all your encouragment my friend!

marice- I have just visited your blog and I see you've made the buttons. Congrats! Looks fabulous!

Undercover ninja said...

I can't get mine to work. I understand that I have to create a button and host it on photobucket. Where to do I paste the URL? The image I created doesn't show at the top of my blog.

tututina said...

Ninja- Are you at least seeing a "red X" where your menu buttons are supposed to be? You need to paste the URL for your button that is hosted on the part of my tutorial that says LINKIZE!

So, for example, let's break the code down into easy terms. One button is surrounded by the < li > and < li > tags. If you look at the example below:

< li >< a href ="URLOFFIRSTPAGE">< imgsrc = "URLOFFIRSTPAGEIMAGE"...< li >

< a href> means where you want the button to bring you to. You're essentially hyperlinking your button. If you look at the "img src" tag, that's where you need to put your photobucket URL. It is the "source of your image". It lets the computer know where to look to get your image. So, when you're finished, you should have not only your image of the button appear, but it should also be linked to the page you want it to be linked to.

If you are seeing a "red X" check to see you have the "right path". That means, check to see if you have entered the URL of the "img src" correctly. Make sure it begins with http:// and ends with a .jpg or .png or .gif. You can check to see what the real URL should be by right-clicking on the red X and viewing the properties. It will tell you the Address (URL) of the picture. See if you made any mistakes.

Hope this helps!

*Don't copy the html from this page. I've added spaces/edited them so it would allow me to post it in the comments section.

elginette_1 said...
This comment has been removed by the author.
redamethyst said...

hello tina! Again thank you for this wonderful tips. I just edited my blog. take care

gendenk said...

wow this tips is what im looking for
thx for sharing :)

Dee said...

Hi! Thanks for the tips dearie! You've actually made my transfer to Blogger smooth and easy. Kudos!!! Mwah!!!

rjblueyes said...

Thanks Tina! I finally found the time to organize my blog and added my buttons! The only question I have is how do I get my buttons to be centered when they're in a post?
Thanks again Tina!