Blogspot How To: Change Post Title Color in Blogger Template Designer Templates

I have received a lot of comments on a previous post. Readers are asking how to change the post title color in the new Blogger Template Designer templates. Well, here is a very simple step by step tutorial for you.We'll make some changes in the template CSS and then you'll be able to customize post title without any coding stuff.

Warning: Before making any changes, you must backup your existing layout:

Blogspot How to: Backup Your Blogger/Blogspot Template

Note: If you're using 'Picture Window' template, then see this tutorial:

How To Change Post Title Color in Picture Window Template

Steps to Make Post Title Font Customizable in the Blogger Template Designer Templates.

1. Go to Design then Edit HTML tab.
2. Find the following code:
   

      <Group description="Post Title" selector=".post">
   <Variable name="post.title.font" description="Font" type="font"
   default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   </Group>

3. Add the following code INSIDE the step 2 code:
   

        <Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>
   <Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>

   
   After adding the result of step 2 & 3 codes will look like this:
   

      <Group description="Post Title" selector=".post">
   <Variable name="post.title.font" description="Font" type="font"
   default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   <Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>
   <Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>
   </Group>

4. Now, we have changed the default code so save your template and move on to the next step.
5. In this step, we need to add some CSS code to stylize the post title. So find this code:
   

   .post {
   margin: 0 0 25px 0;
   }

6. Add the following code below the step 5 code:
   

   .post h3 a, .post h3 a:visited { color: $(post.title.color); }
   .post h3 a:hover { color: $(post.title.hover.color); }

   
   Overall, the codes of step 5 & 6 should look something like this:
   

   .post {
   margin: 0 0 25px 0;
   }
   
   .post h3 a, .post h3 a:visited { color: $(post.title.color); }
   .post h3 a:hover { color: $(post.title.hover.color); }

7. The coding work is finished, save your template and move on to the next step.

Hurray, Coding Done! Go & Customize the Post Title in Template Designer!

Simply open the Template Designer tab and select Advanced from the left options. Find Post Title and you'll see this (click to see full size):


You'll see Color and Hover Color there. By changing the Color, you'll be changing the color of the post title in normal state and it will also be available in Preview mode. However, Hover Color will change the post title color when mouse comes over it. You can't see the change in Hover Color in Preview mode. You have to save your template, open it and bring your cursor over the post title to see hover color effect.