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.
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.
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:
<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” target=”_blank”><img alt=”Photobucket” border=”0″ src=”http://i1084.photobucket.com/albums/j406/mostlytruestuff/aboutyme-1.jpg” /></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.
22 thoughts on “How to Create “Pages” tabs out of images”
Actually that was me, but it's funnier that it says "Clint Hoskins."
Um, I'm so lost. Just come do it for me. I'll buy you Taco Bell and a slurpee!!
I have been searching the web for this exact post all night!! Thank you!! X
Eeek squeak, thanks so much 🙂
Hi 🙂 My links seem to keep opening up a new tab? is there anyway to stop this?
Thanks! how do you get rid of the blogger pages gadget?
I know this was posted ages ago but thank you for keeping it up. I searched a long time to find this. Thank you.
awesome! thank you so much. I've been looking for info on how to use my images as buttons. This was a great help!
I feel stupid….but this did not work for me 😥
This was SO useful, thank you!!
My images are coming up as those broken image things – what did I do wrong? Help 😦 Please!
Nevermind! I got it!
Does anyone know how to place images in a row not vertically?
You mean horizontally? Like across the page? Yours should be doing that if you did this. But I'm not sure what you mean…
Thank you so much! I was really struggling with this until I found your post! I also wrote about it and mentioned your tutorial plus my advice: http://littlebitofclasslittlebitofsass.blogspot.com/2013/01/htmlcss-help.html
I just read the process of your steps and since blogger does not have a design tab or add a gadget button on top of header since its updated version I am not sure where to implement the codes to create the custom pages.
When using this in blogger, I can’t get my images to show up. It is just showing a grey box and a ? when I choose rich text to see it. I have made the html code and pull my images from photobucket. Any advice? thanks so much
Hi, this was really well explained. The image is presented on the site perfectly, however when I click on them it takes me to a page ‘404 not found’
How do I fix this?
how do you do this with the new update on blogger?
Thanks for such an informative post..I have been searching for this exact solution the website I created was looking very boring with all the text tabs…It is really a treat to have the image tabs…A really good work and please keep updating with more such articles.