Styling individual page tabs on Blogger

Changing the appearance of page tabs on Blogger is relatively easy. It can be done via template designer’s built-in menus or using custom CSS. However, the changes will beapplied to all tabs.

What if you want to style each tab individually? Let’s say you want to use a different font or color on just a single tab, or add a different background image to each tab, or perhaps you fancy multi-colored tabs like the one on USA Today’s website. Is it possible?

USA Today’s multi-colored navigation tabs

Yes it is possible, with some HTML and CSS tweaks of course. See the demo on ourwidget showcase blog. Notice that “SEO Tools” tab has a different background color than the rest of the tabs.

This tweak is a two-step process and is limited to Layout templates only (it won’t work on Dynamic templates). Firstly you need to assign an identifier to each tab by editing the Pages gadget template HTML. Once you’ve done that, you can apply a unique style to any tab by referencing it’s identifier in CSS.

Let’s get to work:

1. Assigning a unique identifier(s) to each tab

For you to be able to target each tab individually in CSS, each tab has to have an identifier, and it has to be unique. In our case we will use a class name(s) as the identifier. Here’s how:

1. Go to Template > Edit HTML > Proceed, click the Expand Widget Templates checkbox.
2. Locate your Pages gadget by finding this line of code:

   <b:widget id='PageList1' locked='false' title='Pages'type='PageList'>

3. Several lines below that you will find this list element:

   <li><a expr:href='data:link.href'><data:link.title/></a></li>

4. Replace the list element with this one:
   view sourceprint?

   <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>

What the code above does is taking the title of each tab and using it as the tab’s class name.

2. Applying the styling

To style a tab, go to Template > Customize > Advanced > Add CSS and enter a CSS snippet into the custom CSS box. The snippet should be of the following format:

.PageList li.TAB_NAME a {PUT CSS DECLARATIONS HERE}

in which:

• TAB_NAME is the name/title of the tab that you want to style differently. Remember classnames are case sensitive, so make sure you enter the name as you did when you created the pages. 
• CSS DECLARATIONS are whatever property:value combinations you like to apply -background color, background image, text color, font etc.. The possibilities are endless.

For example if you want to color your “Contact” tab’s background orange, the code required is this:

view sourceprint?

.PageList li.Contact a {background-color: #FF8000;}

For a multiple-word tab name, each word will become a classname. So if your tab’s name is “SEO Tools”, you can reference the tab either by using:

• "SEO", like this:
  view sourceprint?

  .PageList li.SEO a {background-color: #FF8000;}

• or "Tools", like this:
  view sourceprint?

  .PageList li.Tools a {background-color: #FF8000;}

Enjoy!