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

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

1. Open the Template section.

2. Click the Edit HTML button.

3. A new window will open. You'd have to click the Proceed button to start editing.

4. Find the following code:
   

   /* Variable definitions
      ====================

5. REPLACE the above code with the following one:
   

   /* Variable definitions
      ====================
   
      <Group description="Post Title Color" selector="h3.post-title">
        <Variable name="post.title.link.color" description="Link Color" type="color" default="#ff0000" value="#ff0000"/>
        <Variable name="post.title.hover.color" description="Link Hover Color" type="color" default="#0000ff" value="#00ffff"/>
        <Variable name="post.title.color" description="Color on Post Page" type="color" default="#ff00ff" value="#ff00ff"/>
      </Group>
   

   
   Don't save or preview your template yet. Proceed to the next step.
   
6. Now find this code:
   

   ]]></b:skin>

   and REPLACE it with the following one:
   

   h3.post-title { color:$(post.title.color); }
   h3.post-title a, h3.post-title a:visited { color:$(post.title.link.color); }
   h3.post-title a:hover { color:$(post.title.hover.color); }
   
   ]]></b:skin>

7. Click the Preview button. You'll see the post title color as blue. Don't worry you can change it later in Blogger Template Designer. Save your template and click the Close button.

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

Simply click the Customize tab to open the Blogger Template Designer. Select Advanced from the left options. You'll see Post Title Color at the top.:

There are 3 options in the Post Title Color. Here is their detail:


Link Color: This is the color of the post title as a link. Any change to this option will appear in the Template Designer.


Link Hover Color: This color will appear when someone brings mouse over the post title. Any change to this option will not be visible in the Template Designer. You'd have to Apply the change, open the blog and bring your mouse over the post title to see the change in color.


Color on Post Page: This is the color of the post title on post page when post title is not a link. Again, you'd have to Apply the change and open some post title page to see the affect.

Help BetaTemplates!

If this tutorial was helpful then please add a link back to BetaTemplates on your blog. The link code is available at the bottom of this page.