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

Change Post Title Background Color in Blogger-Blogspot Templates

In this instructional exercise I'll reveal to you how to change the post title foundation shading in Blogspot web journals. This alternative is absent of course in Blogger Template Designer. We can add foundation shading to the post title and furthermore change the shade of title itself. Of course, we'll do some altering in the layout HTML code and from that point forward, you'll have the capacity to change the post foundation shading from Blogger Template Designer. Along these lines, here are the straightforward strides to pursue:

Steps to Change Post Title Background Color

Open the Template section.

Click the Edit HTML button.

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.

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>

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>

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?

Open the Template Designer by clicking on Customize button.

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

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 trust this instructional exercise was useful to you. There is another instructional exercise to focus the post title. Do look at that also. Generously add a connection back to this blog. Connection code is accessible at the base of this page. Include it anyplace in your blog. For further customization, get in touch with me and complete your work for nothing of expense.