More HTML nonsense from me. I’m working on my other blog (I have a sinus infection and am too miserable to do anything else…) so I thought I’d share how to make the cool tabs above. They’re made out of images that are “hot linked” (I think it’s called) to the pages you create.

Create Pages:
So first, go to where you create your posts. On that page you’ll see “edit pages“. Click on it. Then you’ll see a blue box that says “New Page” click on that as well. It looks like any regular post page, but here you’ll add anything you want people to be able to come back to.  I’ll show you how to do an “about me” page. Anyways, make all of the pages you’re going to want.  When you are done click on “publish“. When you get to the next page, it’s going to ask you how you want to publish it. Click on “No Gadget“.  You’re going to create the gadget. Unless you’re okay with the tabs just being in the font of the rest of your post titles, in which case, do it however you want. You’ve wasted my time.

Once you’re done making your pages you need to know all of the web addresses to them. So after you publish them, go to “View Page“. Then go up to the address bar and copy the address. Open any word processor (I use Word, but even the notepad works) and paste the address. It’s super helpful to do this with all of them so you don’t have to keep going back to them when you create the gadget.

Create Image:
You can use any image you want for these. There are a lot of blog building sites out there where you can get “buttons” or images for these tabs. I really just like using the font itself. Open up your favorite illustrator. Paint works well for this. Since almost everyone has that, I’ll give my example using it. If you use another program, it’s basically the same thing.

If you’re using Paint, make sure you crop the image down to right around the letters. Then save as a “JPEG” file. If you’re using an illustrator program that lets you choose how big your file is, I would choose no more than 1,000 pixels wide for these pictures. You’ll be able to resize them later, but you won’t want the file to be too big because as you try to compress it, it makes it look all jagged with some fonts)

Save to Photobucket Account:
Do this with all of the titles for all of your pages. Now go to www.photobucket.com. Make an account if you don’t already have one. Don’t give up on this tutorial because I’m making you do this step. I almost did when I was trying to figure it out. There’s no other way. I promise. Just do it. Do it now.

After that, upload all of your images to photobucket that you just created. After you save them to your album, it’ll give you a list of codes. Click anywhere in the “HTML Code” and it’ll automatically  copy it for you. Then go to your word document and put the html codes with all of the pages web addresses. Like this:

It makes it a ton easier, I promise. Now for the tricky part:


Creating the Gadgets:
 If you’ve never used html code before, the one thing you have to know that it HAS to be perfect or it won’t work. Go to your “Design” page (top right if you’re looking at your blog home page). Click on the bar across the top under the header bar that says “Add a gadget”.  Click on “HTML/Javascript” . This is where you’re going to enter the code. There’s going to be a lot of copying and pasting. Do not delete the quotation marks and make sure you’re putting your text in between them. Very important.

<a href=”YOUR WEBADDRESS HERE” target=”_blank”><img alt=”YOUR PHOTOBUCKET CODE HERE” ></a>

So it ends up looking like this:

<a href=”http://mostlycopiedcrafts.blogspot.com/p/fa.html&#8221; target=”_blank”><img alt=”Photobucket” border=”0″ src=”http://i1084.photobucket.com/albums/j406/mostlytruestuff/aboutyme-1.jpg&#8221; /></a>

To make sure it looks right, click on “rich text” up in the corner of the popup window you’re working in:

This will show you how the picture looks. Depending on how big you saved the file in Paint (or your illustrator) it might show up huge. You can scale it down by clicking it, then dragging the image.

Go back to where it says “edit html” and repeat the steps with all of your pages.

Then save. They should be laid out across the top of your blog, right under the header, just like mine do.

Centering Pages Tags: 
To center them (if necessary) you need to add the center tags. Before ALL of the text add: <center>
Then after all of the text add: </center> . Click on the “rich text” again and see that they are centered.

Spacing Out Pages Tags:
If your tags are all mushed together there are a couple of things to try. First, go to the “rich text” part in the html box and hit “enter” a few times in between the tags so there are spaces. Click on save and see if that changed anything. If it didn’t, you’ll have to manually add the html code for spaces.

The HTML code for putting spaces is: & n b s p ; But without the spaces (it won’t let me use a text box to show up (the reason for the text boxes is if I enter the code for you to copy, blogger goes ahead and interprets it, so you see whatever I was making- like a space- instead of the code)).

Using “Labels” as pages:
Do you “label” your posts? It’s that little window underneath each post page. You can give your blog posts different categories. If you want to make one or more of those categories a tab under your header (like if you were me and wanted to add one that included every post that I had labeled “Blog design” up at the head of the page) you can. Just click on that link in whatever you have the labels listed (if you do, like in your sidebar…if you don’t have them listed anywhere why on earth do you even have them? Lame sauce. You’ll probably have to go make a “labels” gadget). Copy and paste the web address for that page and do the same like you did any of the other pages. Easy, eh? I should do it with mine, but I’m not going to right now.

Questions? Leave them for me in the “comments” section. You might end up helping someone else, too.