This page has moved to a new address.

Crackin’ the Blogger Code! Working with Labels and your Menu Bar: A ‘HOW TO’ for blogger!

Mommy Blog Designs: Crackin’ the Blogger Code! Working with Labels and your Menu Bar: A ‘HOW TO’ for blogger!

Saturday, July 16, 2011

Crackin’ the Blogger Code! Working with Labels and your Menu Bar: A ‘HOW TO’ for blogger!

I gotta tell ya ...I’m not one to just to stick with what is given to me. No. If there’s a better way to do something, I’m all about it. If there’s a way to make my blog better organized, and get even more info in front of the eyes of my readers, I’m all about it.

I believe how your blog is organized is hugely important. I love organization. I love using labels. Take a look, for example, at my other blog, MommyMindSpa.com. Have a look at the menu bar right below the header. You’ll notice that not only do some of my pages come up, but I also have different posts with certain labels opening up. Plus ... I even link to outside URLS right from my menu bar too.

This opens up a world of possibilities for your blog!

Yes ... Blogger has a pages widget that helps you make your menu bar, but with it you can only show the pages of your blog. It does not allow you to pull different labels or categories, nor does it allow you, right from your menu bar, to link to outside sites.

So here’s how I get around that ...

We’re going to be covering a few things in this tutorial. They are:
  1. Setting up labels in your Blogger posts 
  2. Figuring out how to show all the posts with that particular label 
  3. The HREF tag (a simple piece of HTML code for linking) 
  4. The table tag (a piece of code to create an organized menu) 
Now I don’t want to scare you off if you’re new to blogging or HTML. I was once completely new to all of this too. But I read OODLES of these kids of tutorials. I am completely self-taught here. So stick with me. I’m going to make this as simple as possible for any mom to do.

Heck ... if we can change a diaper ... with one hand tied behind our back ... and our eyes closed ... then we can code some simple HTML!

So let’s start with something fairly easy:
 
STEP ONE:  Setting up your labels.

I love organizing my blogs with labels, and then pulling these labels from the menu bar. It makes organizing my info super easy! I really recommend using this trick. Here’s how to do it ...

When you’re writing your posts ... in your post editor ... you’ll see a spot right below the text window that says LABELS. If you have never used this before, you will not have anything in here. You can basically create any label you want to use ... just enter it in the box.

The great thing is that once you’ve entered the label once into your blog, it will always be there. When you write your next post, just click on the SHOW ALL button, and you’ll see your previously used labels.

If you want your posts to show when pulling certain labels, you MUST use the exact label here in this box ... and you MUST do this for every post that you want to show.

And you can use these labels for different things.  You can have as many labels as you want!

So ... that was easy! That was step one.

Step 2 is also really easy! And this took me forever to figure out. Then once I did, I could not believe how incredible simple it was!! Let’s now get the URL for the labels we are going to want to include in our menu bar.
STEP TWO:  How to get a page to 'pull' labels

In order to do this, we have to have done step one. Please make sure that you’ve made at least one post, with at least one label. Then publish that post.

Now what you need to do is view the post with the label that you want to pull. We don’t want to view it in the editor anymore. Now I’m talking about viewing it live on your blog.

Scroll to the bottom of your post, and you’ll notice in the post footer, you should see the label that you entered in step one. CLICK on the label. It should be a link.

That will then pull all the posts with the label that you just created. COPY the URL in the address bar exactly as you see it. It should look something like this:

http://www.mommyblogdesigns.com/search/label/Crackin%27%20the%20Blogger%20Code

Paste that entire line into your text editor. We’ll need that in the next step.

And that’s step 2! How are we doing so far? Still pretty easy?

Let’s move on to step 3. Now we need to start playing a bit with HTML. But stick with me. I’m here with ya!

STEP THREE: Setting our menu bar links with the HREF tag

So what is the HREF tag?

The HREF tag is what allows you to set up your links. I suggest getting all your links and HREFs set... in a plain text editor ... and then we’ll move on to the final step ... setting them in your table.

Here’s what you do ...

Copy and paste the following code into your text editor:

<a href="http://www.WhereYouWantToLinkTo.com">What Text You Want To Show</a>

Then replace ‘http://www.WhereYouWantToLinkTo.com’ with the full URL of where you want the link to go. This should be the link that we just created in step 2.

After that, replace ‘What Text You Want To Show’ with ... well ... you guessed it ... replace it with the text that you want to be showed.

The great thing about using HREF is that the URL (which is really long and confusing... will not actually be visible to the reader. It is masked by the text ... and you can put whatever you want in the text. So go ahead and set that now.

Take a few minutes and do this now for all your links. Create all of your menu bar links now ... and put them into your text editor.

Oh ... I should also mention that you can use links to anything you want here using this same HREF tag. You can have some things in your menu bar linking to outside websites if you want ... or to different pages within your site. It’s still the same HREF tag. Just enter the URL that you want it to go to, with the text you want to show. You can link to anything you want with this method.

Have you got all your links and HREFs set? Be sure to get those all done before we move to the next step.

Just to clarify... each link is a separate HREF. So you will repeat the HREF tag a few times, depending on how many links you are setting. 

I also should mention that yes ... these are just plain text links.  I will be covering how to turn these text links into image links in a future tutorial.

OK.. ready? Let’s move on to step 4.

If you’re still with me ... you are doing AMAZING!! I’m so proud of you!!

Step 4 might get a little trickier, but just read over the instructions again and again until you get it. I’ll do my best to break it down so it’s clear.

STEP FOUR - Putting all our links into a nice neat table!

Tables and colums are extremely useful when coding websites. Since I’ve learned this tag, I use it all over the place! It keeps things perfectly lined up ... and super neat!

Let’s see how simple I can make this ...


<table border="0" cellpadding="1" cellspacing="4" width="800">

<tr><td align="left" valign="top" width="200">

INSERT YOUR 1ST COMPLETE HREF LINK HERE

</td><td align="left" valign="top" width="200">

INSERT YOUR 2ND COMPLETE HREF LINK HERE

</td><td align="left" valign="top" width="200">

INSERT YOUR 3RD COMPLETE HREF LINK HERE

</td><td align="left" valign="top" width="200">

INSERT YOUR 4TH COMPLETE HREF LINK HERE

</a></td></tr></table>

Now I could actually walk you through all the components that make up that tag, but I think I may leave that for another tutorial. I’ve already given you a lot of stuff to think about. If you have any questions, please leave in the comments and I will answer them, but I think I’m just going to give you the tag to use.

I will tell you this ... Right now, that code is for 4 links. If you need more, simply insert another 
</td><td align="left" valign="top" width="200"> 
and then your next link. IMPORTANT ... do this in the middle. You’ll notice the last closing tags are different than the ones in the middle. So if you are going to add extra rows, do it in the middle and not at the bottom. The bottom line, as in the snippet of code I gave you, needs to remain the bottom row.

Also ... you can adjust the widths so that this table fits on your site. You’ll notice the top line has the width for the full table. It’s now set at 800 pixels. You can make that bigger or smaller, to fit your blog.

But make sure that you then go in and adjust the widths of all the individual cells so that the math all works out. This can sometimes take some playing around with. I normally experiment with it a few times before I’m happy with it.

You'll be able to play around with the different widths once you post your menu bar.  And that's what we'll  be doing in step 5!

STEP FIVE - Putting all this mumbo jumbo onto your blog
Now that we're created a whole bunch of mumbo jumbo, what do we do with it?  How do we turn that into our menu bar?  This step is super simple ...

  • Log in to your Blogger dashboard and click on DESIGN.  This should take you into PAGE ELEMENTS.  
  • Click on ADD GADGET.  This will open a new window.
  • Scroll through the list and find HTML/JavaScript.  Click on that one
  • A big text box will open.  Copy and paste the entire mumbo jumbo that you created in step 4 ... and enter it exactly into that box.
  • Hit SAVE
  • Now you can drag and drop the HTML box here you want it to be on the page.  Normally, menu bars are either above or below the header.  You can play around with the placement if you want.
  • Hit publish ... and take a look at what you created!  Yeay!

Phew ... how did we do? Are you still with me? Did I lose you anywhere ... or did everything work out for you? PLEASE... if you have any issues with this, post a comment below and I will get with you right away to help you figure it out.

NOTE - this tutorial is for a very simple, basic, text menu bar. I’ll be back tomorrow and I’ll explain how to turn those simple text links into graphic image links. (I just didn’t want to overwhelm you too much! I’ll save the next step for tomorrow!) But once you’ve got these steps done and working, switching your text links to graphic links is a piece of cake.

Please comment below and let me know what you think of this tutorial. This is my first one, so I’m new at writing these! I hope that my instructions were clear, and that you were able to follow along. I really appreciate your feedback!

And if you have any suggestions of things you’d like to learn with regards to your Blogger blog, please post ‘em! I’ll do my best to answer every question that comes in!

Thanks for reading!
xoxoxo
Ro :)

Labels: ,

10 Comments:

At August 16, 2011 at 4:13 AM , Blogger Kathy said...

Wow!!! Ro this is amazing!! You make it sound almost do-able!!! And, I'm someone who barely can turn on my computer!! Thank you so much!!

 
At August 16, 2011 at 4:23 PM , Blogger Mandi said...

RO! O...M...G...! I just followed your tutorial and created a new menu button for my current giveaways! Yee-to the-haw! I honestly tried to do this by myself this morning and just ended up frustrated.

Thank you, thank you, thank you! I'll be back for more tutorials.

Mandi
Smile and Mama With Me

 
At August 16, 2011 at 8:18 PM , Blogger Syed Store said...

Hi Ro, I can't tell you, how much thankful I am to you. I never found simple instructions like you have given us. awesome. I am gonna do that for my blog soon, I tried and it did work. Just couldn't find time to complete it which I will spare soon for me. Hey can you please teach me how to make a button for a blog. I can understand your simple language so fast. Can't say you thank enough. Please keep posting.

 
At August 17, 2011 at 2:24 AM , Blogger mamawolfe said...

I think I might be able to do this! Thanks!

 
At August 21, 2011 at 12:09 AM , Blogger Amber Edwards said...

You are BRILLIANT! I have been trying to figure this out on my own for a very long time, and you made it So simple! Thank you! I just applied this to my blog: www.jadelouisedesigns.blogspot.com and it is amazing the difference in appearance it has made! Thank you! I'm so glad I found out about you via Voicebox!

 
At August 26, 2011 at 1:55 PM , Blogger Julie said...

This comment has been removed by the author.

 
At August 30, 2011 at 11:13 PM , Blogger True Identity said...

I noticed that only 2 of my links worked , the other 2 kinda dissapeared. Should I make the links smaller with bit.ly?

 
At September 5, 2011 at 1:34 PM , Blogger True Identity said...

I somehow got it to work! :)

 
At September 12, 2011 at 3:59 PM , Blogger heinzmom at hotmail dot com said...

Thank you so much! You have no idea how long I've been trying to do this. I'm so happy :-) It totally worked and it was easy!
Michelle
expectingtowin.blogspot.com

 
At October 21, 2011 at 1:13 AM , Blogger Val Curtis said...

Fabulous! Major time saver for me. Thank you!

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home