Beautify your Blog: week 5 - navigation tabs8:00:00 AM
Welcome back to the Sew at Home Mummy "Beautify your Blog" weekly tutorial series.
This week we'll be covering how to insert/use custom navigation tabs. These are the little buttons which sit right under your header.
If you haven't noticed, we're kind of working from top-to-bottom on your blog.
I *highly* suggest, if you haven't been following along weekly, that you start at the beginning of my tutorials and work your way along. Each week we're building on what we learned the weeks prior.
As always, before making any changes to your blog, make sure to back it up. I covered how to do that in the first week's lesson. I also suggest working on a test-blog before making any changes to your 'real' blog. Please also read the disclosure statement in the first week's tutorial.
Here are the previous week's lessons:
1. Start Here (*disclosure statement*)
Let's get started on Week 5 - Custom Navigation Tabs.
Navigation tabs sit right under your header, like this:
In order to make a custom tab for your page(s), you need to create or download a small image which you can use as that tab. Generally speaking, you want your image to be about 50px tall or less.
First I'll show you how to download a free set of tab images, place them in the right spot on your blog, and link them to the pages you'd like.
1.0 Creating blog "Pages"
Some of us may not even know how to create a page within your blog, so I'll go ahead and show you quickly how to do that.
1.1 From your Blogger.com homepage, and beside your test-blog title in the dropdown menu, click:
on the screen that appears, click New Page
1.2 A screen appears which looks much like a regular posting page, which you should be familiar with. Go ahead and give your page a title, and you can write a bit if you'd like. What I did was I copy and pasted my "About me" page from my real Sew at Home Mummy site so I'd have some content in there to play with:
once you're done, click Publish in the top right hand corner.
You'll now see the following screen, with the new page you created listed:
Now! we need to grab the URL of this page for our button -
1.3 Grabbing a URL for a page:
From your Pages page within your blog, and under the page you'd like to grab the address from, click View. Your page will appear:
CTRL and C at the same time
(this "Copies") that address for you)
Now go to your Windows button and open a new Notepad document (under "All Programs" and then "Accessories"
once you have the new Notepad document opened, press CTRL and V at the same time; this "pastes" your web address into the document for safe keeping for later.
2.0 Using Pre-made Navigation Buttons
By "pre-made", I mean that someone out there in the blogosphere has made these and offered them up for anyone out there to use. I Googled "free blog navigation buttons" and here is one site I found with some cool stuff:
Starflower Studio: navigation buttons.
The nice thing about this site is that she's coded the buttons for us. Which means that we don't need to have a hosting site host it for us, she's doing it. (you'll see what I mean by a hosting site when we make our own custom buttons):
|see the html code boxes below each tab? that'll make our lives a bit easier...|
image courtesy of Starflower Studios.com
So! This is how to use these buttons.
2.1 From your Blogger.com homepage, and beside your test blog title from the dropdown menu select
Under your Blog Header, select Add a gadget
in the pop-up that appears, leave the title field blank.
Highlight the tab image, then click the "Insert Link" button (the little world with the chain link over top, circled in red above)
In the pop-up which appears, copy (remember - CTRL+C) and paste (CTRL+V) the entire code you saved from step 1.3 above into the URL box, like this:
...and then click "OK".
2.2 Adding multiple buttons.
To add multiple buttons, just place the code for the button next to the existing button, with a space or two between:
Click the Rich Text button
The second button will appear:
Click View Blog:
3.0 Changing the justification of your buttons
Notice how my buttons in the above picture 'justify' (sit) left? What if I want to center them to my title?
3.1 From your Layout page,
the following pop-up appears; you should see your buttons in their native HTML form (if you don't you can click "Rich Text" to see what I see):
and at the end of the code, type (exactly!)
so that looks like this:
4.0 Creating your own custom blog buttons.
This will be a condensed version, since some of this content we've covered in previous week's tutorials, but here you go!
4.1 Creating the image.
It's your choice which program you'd like to use; I tend to use Publisher or Photoshop Elements, but if you want a simple text image, you could also just use Paint, which should have come with your computer.
Ideally, you'll want your text and images to be all the same size. You can edit the size of your button in Pixlr later, but when creating your buttons, keep in mind that they should be easy to read when they're shrunk to a small size.
I created a few simple text buttons just in paint to give you an idea of what you can do:
5.0 Hosting your image.
We need the image to be hosted by a site, so that we can grab that HTML code we talked about above.
You can use any image hosting site you like; I prefer Photobucket.com, mostly because it creates the sharing HTML code for me and I can just grab it and go.
I'll be covering how to use Photobucket in this tutorial.
5.1 Upload your button pictures you created to Photobucket.com
Select your image from your Library. Above the button you'll see "Edit". Click that.
Resize your button to be under 50px tall.
In the screen that appears you'll see the Links to Share this Picture in the bottom right corner (circled in red in the image below)
Click in the HTML box to copy the code (circled in orange in the pic above).
6.0 Uploading your new (custom!) button to your blog.
From here on out, the tutorial is exactly the same as in steps 1, 2 and 3 above! Congratulations, you have some gorgeous blog buttons. :)
This week's BEFORE and AFTERs: