Styling individual page tabs Blogger

Change the look of the page tabs in Blogger is relatively easy. It can happen in the model designer built-in menus, or using a custom CSS. However, the changes are 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 only one tab, or add a different background image for each tab, or maybe you crave a multi-colored tabs as one of the USA Today website. Is this possible?

USA Today's multi-colored navigation tabs
Yes it is possible, with some HTML and CSS tweaks, of course. See a demo of our widget showcase blog. Note that the "SEO Tools" tab has a different background color than the rest of the tabs.
This trick is a two step process, and is limited only layout templates (it does not operate the dynamic patterns). First of all, you need to set the tag for each tab by editing the template HTML pages gadget. Once you've done that, you can use the unique style of any tab in reference to a CSS tag.
Let's get to work:

1. Determination of the unique identifier (s) of each tab
To be able to focus on each tab separately CSS, each tab must be identified, and it must be unique. In our case we use the class name (s) of the tag. To do this:

Update November 2012: The selected tab now be regarded as a custom tab style.
Select Model> Edit HTML> Click Continue to Expand Widget Templates check box.

Search Pages gadget by finding this line of code:

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

Several lines below that, you can find these codes:

<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>

Replace it with this:

<li expr:class='data:link.title + "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>

What's new code does is add a title on each tab, the tab class name, so that each tab can be referred to the title later.

2. Applying design
Style tab, go to Template> Customize> Advanced> Add CSS and enter the CSS code snippet custom CSS box. The code snippet should be in the following format:
. PageList li.TAB_NAME {CSS} DECLARATIONS HERE
in which:
TAB_NAME is the name / title of the tab you want a different style. Remember class names are case sensitive, so make sure you enter the name you made when you created this site.

CSS declarations are the property: value combinations you want to search, background color, background image, text color, font, etc.. The possibilities are endless.
For example, if you want to color the "Contact" tab in the orange background, the code is needed, is this:
. PageList li.Contact {background-color: # FF8000;}

In order several words on the tab name, every word will classname. So if the tab is called "SEO Tools", you can refer to the tab by using either:
"SEO", like this:
. PageList li.SEO {background-color: # FF8000;}
or "tools", such as this one:
. PageList li.Tools {background-color: # FF8000;}

Enjoy!

By Unknown