Beautify your Blog: week 5 - navigation tabs

8:00:00 AM

Welcome back to the Sew at Home Mummy "Beautify your Blog" weekly tutorial series.

Sew at Home Mummy

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:
the tabs can link to any URL - a page within your blog, a list of labels you've created, an Etsy shop you own, your Flickr page, etc., just to name a few.

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:
Pages
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:
so what you'll need to do is highlight the entire web address which appears (circled in red above) and on your (PC) keyboard, press
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
You can also find a lot of great graphic designers on Etsy who will make you some gorgeous buttons for a reasonable price. Just another option.

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

Layout



Under your Blog Header, select Add a gadget
in the pop-up which appears, select
HTML/Javascript

in the pop-up that appears, leave the title field blank.
in the Content box, we're going to copy and paste the code from the Starflower site for the button we want to use:
...then click Rich Text - your tab image should appear:


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 Edit HTML button

Click the Rich Text button

The second button will appear:
Repeat the steps above to insert your URL of choice - highlight the button, press the insert link button, and paste the URL of choice in the pop-up. For me, in this instance, I'm going to link to my Bloglovin' site:
2.3 Once you're happy with your buttons, click Save.

Click View Blog:
test your buttons to make sure they're working, and you're done!


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,
select Edit on your HTML/Javascript element which your page tabs are sitting in.

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):
at the very beginning of the code, type (exactly!)

<center>

and at the end of the code, type (exactly!)

</center>

so that looks like this:
3.2 Click Save.


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.

Crop your button, if need be.

Resize your button to be under 50px tall.

Click Save.

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:

BEFORE:


AFTER:

You Might Also Like

4 comments

  1. Thanks for all the wonderful help. I hope to update my blog one of these days. You have made it seem so easy with these posts.

    ReplyDelete
  2. Girl, you are killing it with these posts. Now I just need to get busy and do some updates! This post in particular is sew helpful to me!

    ReplyDelete
  3. Ahhh, just what I was hoping to learn! Thank you so much! You make it so clear and easy to understand. Tomorrow I play on my test blog.

    ReplyDelete
  4. Erin, Erin, Erin...what can I say?!? You are so amazing! You've taught me so, so much. Here's where I'm at now...
    http://aquiltingchickstestblog.blogspot.com/

    ReplyDelete

I ♥ to hear from you!

Thank you for taking the time to leave a comment or for asking me a question. Rather email me? Reach out at sewathomemummy@gmail.com.

I like to email everyone back when they've commented - so if you're a no-reply blogger, make sure to leave your email address in your comment so I can share the love back atcha!