Mod My Blog Monday: Fun With Tabs

A few of you lovely bloggers have asked me how I get my tabs to be the colour that I want, so today I'm going to show you how to modify that and as a bonus I'm going to show you how to add non-page links to the pages gadget. It's all really easy, so if I don't make it clear enough, please let me know!

Before You Start

 As always, back up, back up, back up!

Check last week's Mod My Blog if you need to know how!

Changing Tab Background Colour

OK, this tutorial is based on you using the "Picture Window" template from Blogger. If changing your blog to that screws everything up, then.. umm.. Awkward?? 

But send me an email and I'll try and help you sort it out ;)

OK, so first, if it's not already using it, apply the "Picture Window" template to your blog.

Click the "design" tab then choose "template designer" (both in purple below):

When that loads, select the "Picture Window" template. If you look at the lower half of your screen, you'll see a preview of your blog with this template applied. If it looks OK, click "Apply To Blog". When it saves, click "Back to Blogger".

If it doesn't look OK, you can email me ;)

If you haven't already added pages to your blog, do it now. I'm assuming if this tutorial interests you, you've probably already done this ;) If not, click the "Posting" tab, then "Edit Pages" then "New Page" fill in a title, some info and save.

A side note that you can ignore:

Let's have a look in the template designer again ... 

If you've forgotten already, click "Design" then "Template Designer" ;)

If you click "Advanced" then "Tabs Background" in the image below, you'll see that by default, all the "Tabs Background" options are set to transparent. 

Leave them this way!

They don't really help us. What they do change is shown in the image below:

(Remember, you can look at a bigger version of any of these images by clicking on it)

The "Separator Color" changes the colour of the very edge of the tab.
You can choose something that offsets your tab
background colour if you want, or leave it transparent.

OK, you can pay attention again now..!

*** In next week's Mod My Blog I'll show you an even easier way to do this! ***

OK, let's get into it! Click the "Design" tab, then "Edit HTML" and then tick the "Expand Widget Templates" box. The page will reload.

In the text box, the HTML for your blog template is shown. Search for ".tabs-inner" until you find code that looks like this:

(You can search by hitting "Control" + "F" keys on your keyboard. Depending on your browser, a text box or pop up should appear somewhere. If you have trouble, let me know what browser you're using!)

I've highlighted the bit we're going to change

Replace the part that says ${tab.background} with the keyword or number that corresponds to the colour that you want (I'll explain a little more in a moment).

I also like to add a comment before and after the code that I change, so it's easy to find again next time. Since we're actually editing CSS, comments need to start with /** and end with **/

Now the code looks like this:

Click "Preview" below the big HTML text box. Your tabs will now look something like this:

You're so clever, go you! If you like it, click "Save" below the big HTML text box and your blog will be updated to reflect what you just did.

Colours in HTML

To define a colour in HTML, you can either use one of the predefined keywords (like I did in the example above with red) or you can use a hex code. There are lots of HTML colour guides and pickers online.

Here's one example. Visit HTML Color Codes and scroll down until you see the colour picker. Use the tool to select a colour that you like. The code in the red highlighted box below will change. Copy the code from that box.

Instead of using a colour keyword like "red" you can now use "#59BCDA" for the blue shown above, or "#RRGGBB" where RRGGBB is the code you copied from the box. Remember to keep the # though!

Adding a Non-Page Link

Here's your bonus, you lucky people you!

Back to that HTML text box, with the "Expand Widget Templates" box ticked as before!

Find the bit of code that looks like this:

(I search for "tabs" until I find it)

In the image below, 

PURPLE shows the opening and closing tags of the tab link list

BLUE shows the code that displays the links for the Blogger pages

GREEN is the code we're adding!

As before, I like to add a comment before and after the code I'm changing. Because we're now editing HTML code rather than CSS, the comment code starts with <!-- and ends with -->

In between my comment tags, we've got this:

<li> <A HREF="URL">Text</A> </li>

Replace URL with the web address of the page you're linking to. 

I recommend http://hazelandhoneysuckle.blogspot.com ;) Hehehe!

Replace Text with the clickable text you want to appear on your tab.

The green <li> and </li> tags are opening and closing list item tags. Your link code needs to go between these so it's added to the list of tabs.

The <A> and </A> tags are your link tags.

BIG TIP: If you want the page to load in a new tab, instead of over the top of the current page, add the target="_blank" attribute that we discussed last week! Now the code above would look like this:

<li> <A HREF="URL" TARGET="_blank">Text</A> </li>

We're done! Now you should have something that looks vaguely like this:

Hope that helps! Keep asking me your questions, I love it! :D