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 be applied 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?

different color for each menu tab

USA Today’s multi-colored navigation tabs

Yes it is possible, with some HTML and CSS tweaks of course. See the demo on our widget 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 classname(s) as the identifier. Here’s how:

Update Nov 2012: Selected tab now keeps your custom tab styling.

  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 these code:
    <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
    <b:else/>
    <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>
  4. Replace it with this one:
    <li expr:class='data:link.title + &quot; selected&quot;'><a expr:href='data:link.href'><data:link.title/></a></li>
    <b:else/>
    <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>

What the new code does is adding the title of each tab to the tab’s classname, thus enabling each tab to be referenced by it’s title later.


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:

.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:
    .PageList li.SEO a {background-color: #FF8000;}
  • or "Tools", like this:
    .PageList li.Tools a {background-color: #FF8000;}

Enjoy!

26 comments to "Styling individual page tabs on Blogger"

putera June 1, 2012 at 9:54 AM    

nice sharing ,,but not understand about CSS

Graduate Jobs in Nigeria June 1, 2012 at 8:23 PM    

This is interesting.I use all your tutorials in my Blogs.Great job. Tnx

gamerap June 2, 2012 at 10:16 PM    

wow...thx for tutorial <3

Azman June 18, 2012 at 7:34 PM    

i'm new in this and still failed to put background on my tabs...please help me-http://hiqualityarowanahub.blogspot.com/

Greenlava June 19, 2012 at 1:15 AM    

@Azman
What do you have in mind? Is it:
One background image for all tabs? or
Same background image for each tab? or
Different background image for each tab?

Azman June 20, 2012 at 6:07 AM    

Thanks greenlava for fast reply,i think one background image for all tabs and could you guide me how to make drop down menu ?
(drop down menu ni yang wat kepala nak pecah...aduuuih)and thanks in advance mate

Greenlava June 21, 2012 at 10:39 AM    

@Azman
Use this CSS code:
.PageList ul {background: url("PUT YOUR IMAGE URL HERE");}

For dropdown menu refer to this tutorial: Installing a multi level CSS dropdown menu

LetMeClear June 30, 2012 at 3:36 PM    

Thanks for this tutorail, From couple of days I was looking for this hack.

Tip Garden July 12, 2012 at 8:39 AM    

Thanks for the help. I have a slight problem I'd love to figure out.I made my index using your tutorial, created a page for it. Edited the tabs, but hate that the index tab is grey until the mouse hovers over it and then the color is there. How do I make the tab just one solid color all the time,so that the home tab and the index tab are the same all the time?
http://tipgarden.blogspot.com

Greenlava July 16, 2012 at 10:04 PM    

@Tip Garden
Go to Template > Edit HTML > Proceed and find this:
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
SOME CODES HERE
}

This the styling code for hover and selected tab.
To enforce the styling to all tabs, replace the code with this:
.tabs-inner .widget li a,
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
SOME CODES HERE
}

Andrea September 16, 2012 at 7:56 AM    

Hi there! I have been loving your blog tutorials. I am having trouble with this one though and hope you can help. I am unable to locate the code in step 1.3. Here is the snippet that I think is applicable:
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + &quot;_select&quot;'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected'><data:link.title/></option>
<b:else/>
<option expr:value='data:link.href'><data:link.title/></option>
</b:if>
</b:loop>
</select>
<span class='pagelist-arrow'>&amp;#9660;</span>

Hope this isn't inappropriate or anything. Thanks in advance :)

Greenlava September 26, 2012 at 3:44 PM    

@Andrea
That's the code for the mobile version of the tabs. The code you want is just a few lines below that.
Or you can press Crtl+F (to activate search) and enter this code in the search box:
<li expr:class='data:link.title'>

Brittney Paulson September 29, 2012 at 10:18 AM    

I have a similar question to @Azman's but instead of having the same background image for all, I would like to have a different background image for each tab. What would the HTML code be for that?

Thanks so much!

Greenlava September 29, 2012 at 10:48 PM    

@Brittney Paulson
1. The HTML code is provided in step 1 of the tutorial.
2. You also need CSS code (as explained in step 2).
Example: The following code will add background image to your "inspirations" tab:
.PageList li.inspirations a {background: url("PUT YOUR IMAGE URL HERE");}

open source developer October 1, 2012 at 5:27 PM    

Your blog is awe-inspiring. I have found many new things. Your way of staging is also fascinating. You have elected very incredible topic. I appreciated it.

mp3 songs October 4, 2012 at 2:17 PM    

wow it is working thank you for posting

Archurst October 4, 2012 at 10:01 PM    

I really enjoyed this. But how can i edit only a page's html (not the whole blog layout) in blogger?

Anonymous,  October 8, 2012 at 5:39 PM    

great! I used that to add som html to that widget!

Greenlava October 9, 2012 at 8:17 PM    

@Archurst
Just go to Pages and click the Edit link under the page's title.

The Go2Girl November 6, 2012 at 12:21 AM    

Hi! Thanks so so much for this tutorial. Huge help! I've gotten the background and font changed for a single tab (for Christmas) and I'm very happy with it. I have one little problem though, when I click on that (Christmas) page the tab changes do not appear. Have I added the css incorrectly or do I need to add code so that the tab will look the same even when I'm on that page?

Greenlava November 7, 2012 at 6:08 PM    

@The Go2Girl
I've updated the code, check it out. It should fix your problem.

sherri November 8, 2012 at 3:50 AM    

Hello,

I was wondering if you knew how to make this a drop down menu? Thanks. :)

Greenlava November 14, 2012 at 8:34 PM    

@sherri
See the tutorial here:
http://www.bloggersentral.com/2009/10/installing-multi-level-css-dropdown.html

Lieke January 10, 2013 at 4:20 PM    

Thanks! My blog is suddenly looking much better!

lieke-gg.blogspot.com

khairil January 24, 2013 at 12:49 PM    

thanks, it works on my blog. but i have to change it for some other reasons.

KittyPurry,  February 8, 2013 at 12:00 AM    

Help! ;<
It doesn't work for my home page. ._. What should I put in tab_name?

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment