Change Post Title Color in Blogger Template

Warning: Before making any changes to template CSS, it is a good practice to backup your existing template:

You can tweak most of your template setting in template designer, with some limitations. Post title is one of the limitations. Many of you may have noticed that there is no option to manipulate your post title. Wondering how to make this option available? Then you should read through this tutorial.

In this tutorial, we will customize post title color by applying the template editor feature in blogger. Before that, there are some changes need to be made in the template CSS. Here I will walk you through with simple steps to change your post title in blogger.

1. Click Template > Edit HTML > Proceed.

2. Ctrl + F to find this code:

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

3. Replace with the following code:

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

4. Ctrl + F to find this code:

]]></b:skin>

5. Replace with the following code:

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>

6. Click Save template, and then click Customize. Blog preview is shown below, with the post title color as blue. Any changes in the template will appear in blog preview.

7. Click Advanced > Post Title Color. Here is the detail of 3 options:

Link Color: This is the color of the post title when post title is a link.

Link Hover Color: This is the color of the post title when post title is hovered by mouse.

Color on Post Page: This is the color of the post title on post page when post title is not a link.

8. Lastly, click Apply to Blog.