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. 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;}
    ]]></b:skin>
  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 free of cost.

13 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article
    seo course najafgarh

    ReplyDelete
  3. Thanks for your great information, the contents are quiet interesting. I will be waiting for your next post.

    seo company in Jaipur

    ReplyDelete
  4. thanks a lot for sharing, this really helped in my workSEO company in Varanasi

    ReplyDelete
  5. Well explained article, loved to read this blog post and bookmarking this blog for future.http://claytonvyyv00011.review-blogger.com/26684249/all-about-satta-king

    ReplyDelete
  6. Very good info. Lucky me I discovered your site by chance (stumbleupon). I have saved it for later! Here is my web site:http://finnaayv00111.tribunablog.com/all-about-satta-king-18301845

    ReplyDelete
  7. Very good info. Lucky me I discovered your site by chance (stumbleupon). I have saved it for later! Here is my web site:http://pensiam.com/home.php?mod=space&uid=2074781

    ReplyDelete
  8. I loved to read blogs and your blog is one of the best blog.Sattaking

    ReplyDelete
  9. Get a unique and feature rich mobile app of your business. Hire the fruitful services of leading mobile application development company in Jalandhar India and connect more masses on your business to boost up sales and revenue of business products and services.

    ReplyDelete
  10. This is a great article thanks for sharing this informative information. I will visit your blog regularly for some latest post. I will visit your blog regularly for Some latest post. background remover

    ReplyDelete
  11. Great info here.
    Choose Best Web design Company in Thane. Design your site for best conversions online. Also see SEO Company in Thane. Optimize your site for best keywords online. Choose Best Dermatologist in Thane. Care Your skin.

    ReplyDelete
  12. Thanks for sharing this valuable information. I would recommend you take a look at the latest post related to space bar clicker. This is an online device that lets you how repeatedly you can tap the spacebar button in given time duration. The space bar counter is easy to operate.

    ReplyDelete
  13. This is a great article. I like the way you express the information to us. Thanks for such a post and please keep posting articles regularly | satta king

    ReplyDelete

Categories

Unordered List

Sample Text

Blog Archive

Vendor Cisco

Powered by Blogger.

Popular Posts

Recent Posts

Text Widget