Change Post Title Background Color in Blogger Template

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

When you visit some blogs, you may have notice that their post title background color change when you hover your mouse over it. Amazing, isn't it? But how they did it?

In this tutorial, we will change the post title background color. As usual, to change the post background color from Blogger Template Designer, the template CSS needs to be edited. These simple steps can be applied to all templates provided by template designer.

1. Click Template > Edit HTML > Proceed.

2. Ctrl + F to find highlighted code and add extra code:

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

   <Group description="Post Title Background Color" selector="h3.post-title">
     <Variable name="post.title.bg.color" description="Title Background Color" type="color" default="#222222" value="#eeeeee"/>
     <Variable name="post.title.bg.hover.color" description="Title Hover Background Color" type="color" default="#222222" value="#000000"/>
   </Group>

3a. For Simple Blogger, Ctrl + F to find highlighted code and add extra code:

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

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

3b. For Picture Window Blogger, Ctrl + F to find highlighted code and add extra code:

h3.post-title {
  margin: 0;
  font: $(post.title.font);
}

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

3c. For Awesome Inc & Ethereal Blogger, Ctrl + F to find highlighted code and add extra code:

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

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

3d. For Watermark Blogger, Ctrl + F to find highlighted code and add extra code:

h3.post-title {
  font: $(post.title.font);
  margin: 0;
}

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

3e. For Travel Blogger, Ctrl + F to find highlighted code and add extra code:

h3.post-title {
  margin-top: 20px;
}

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

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

5. Click Advanced > Post Title Background Color. Here is the detail of 2 options:

Post Title Background Color: This is the background color of the post title when post title is a link.

Title Hover Background Color: This is the background color of the post title when post title is hovered by mouse.

6. Lastly, click Apply to Blog.