How To Change Post Title Color in Blogger 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. Replace the above code with 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"/>
   <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 find this code:
   

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

5. Replace the previous code with the following code:
   

   .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); }

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

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,

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.