How to Change Post Title Background Color

How to Change Post Title Background Color in Blogger-Blogspot Templates

In this tutorial I'll tell you how to change the post title background color in Blogspot blogs. This option is not present by default in Blogger Template Designer. We can add background color to the post title and also change the color of title itself. As usual, we'll do some editing in the template HTML code and after that, you'll be able to change the post background color from Blogger Template Designer. So, here are the simple steps to follow:

Steps to Change Post Title Background Color

1. Open the Template section.

2. Click the Edit HTML button.

3. You'll see a lot of code on next page. Don't worry. Just expand the <b:skin>...</b:skin> tag by clicking on the arrow on left side.

4. Now find the following code:

/* Variable definitions

   ====================

Replace the above code with the following one:

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

   </Group>

5. Now find following line of code:

]]></b:skin>

Replace the above code with following one:

h3.post-title { background:$(post.title.bg.color); padding:10px;}

]]></b:skin>

6. That's it. Coding is finished. Save your template. Now, changing the background color is super easy. See below.

How to Customize the Post Title Background Color from Blogger Template Designer?

1. Open the Template Designer by clicking on Customize button.

2. Chose Advanced from left side and then click the first option Post Title Background Color.

3. Now, simply make changes and make sure to click the Apply to Blog on top right to save your changes. You can also preview the changes live.

I hope this tutorial was helpful to you. There is another tutorial to center the post title. Do check that out as well. Kindly add a link back to this blog. Link code is available at the bottom of this page. Add it anywhere in your blog. For further customization, contact me and get your work done for free of cost.