Pages

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:

Note: This tutorial has been updated on 12-12-2013.

Steps to Change Post Title Background Color

  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. 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.
  6. Now find the following code:
  7. /* 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>
  8. Now find following line of code:
  9. ]]></b:skin>
    Replace the above code with following one:
    h3.post-title { background:$(post.title.bg.color); padding:10px;}
  10. 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 as low as $11.

20 comments:

  1. how can set the opacity of blog page how we can change it?

    ReplyDelete
  2. @ Asif, what do you mean? I couldn't understand your question. Can you please explain with an example?

    ReplyDelete
  3. How about inserting background image for post title? I'm using Simple Blogger template

    ReplyDelete
  4. @ LadyHL, I'll surely write a tutorial on that soon :) You can follow the blog.

    ReplyDelete
  5. Bilal, I love you for this post; thank you! However, in my Picture Window template, the code I find after "h3.post-title" looks like this rather than your example:




    Since I am an idiot, I have no idea what this means or what I should do to replace the code as described. My objective is to make the blog title stand out from the background picture (black, white and grey all fade into the background so I need a text box or shadow or something). Here's my blog address: http://migthecanadian.blogspot.com/

    Thanks in advance,
    MiG

    ReplyDelete
    Replies
    1. Hi MiG, well I've checked your blog. You've already completed the step 5 but you're stuck at the next step. The code mentioned in the step 6 is present in your blog HTML.

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


      You just have to replace it with the following one:

      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); }


      After that click Preview to check the preview and then save.

      Delete
  6. Hey Bilal,

    Everything on this site is amazing and so helpful! I was able to change the post title background color, but was wondering if there was a way to extend the background color the width of the main area? That way it doesn't cut off directly where the text ends.

    ReplyDelete
    Replies
    1. Hi Dan, thanks for liking this blog. Can you please explain your question? Please take some screen shot or give some example. I can't understand your question.

      Delete
    2. Absolutely. If you go to http://www.explodinginsound.com/2012/08/ghetto-cross-mems-of-deerhunter-black.html you can see the post title is centered and contains a green background fill. My question: is there a way for the title background fill to span the whole column width [as opposed to just the text]?

      Delete
  7. Hey Bilal,

    If you look at http://www.explodinginsound.com/2012/08/ghetto-cross-mems-of-deerhunter-black.html you can see that the post title text contains a green background fill. My question is: can I extend the background so that it extends the entire column width (as opposed to just the text)?

    ReplyDelete
  8. Nevermind, someone showed me how to do it using CSS. Thanks!

    ReplyDelete
  9. This is so cool thanks for the tutorial.

    ReplyDelete
  10. Is there any way that we can modify the opacity on the Travel template?

    ReplyDelete