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:
Backup Blogger 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.

4 comments:

  1. Hi, what a great web blog. I usually spend hours on the net reading blogs on Best Deals. And, I really would like to praise you for writing such a fabulous article. I honestly believe there is a skill to writing articles that only very few posses and yes, you got it. This is really informative and I will for sure refer my friends the same. Thanks.

    ReplyDelete
  2. I can't stand sleeping in complete silence, so I always have a fan on. Also, I'lll admit that I use my ipod for most of my work day since
    http://www.arabie3lan.com الشيخ الروحاني
    I spend a lot of it working through paperwork. I also often use it for my walks, though, from time to time, I'll go without it and just listen to the sounds around me and take in the nice weather.

    ReplyDelete
  3. www.herzas.net - Domain Parking
    الشيخ الروحاني http://www.sheikhrohani.de/

    ReplyDelete

© 2012 | All rights reserved | Design by Blogger Template Tutorials