Tutorial - Add a Background Colour to Post & Sidebar titles in Blogger

I have yet another Blogger tutorial for you. This time I'll be showing you how to add a background colour to your sidebar & post titles. It is a very simple process now that Blogger let's you add CSS via its Template Designer.

First of all you need to find out the HTML hex code of your chosen colour. You can go to HTML Codes to find out the hex code. Make a note of it, it should be # then a combination of 6 characters.

Log in to Blogger then navigate to Template>Customise>Advanced>Add CSS

To add the background to post titles & sidebar titles. Copy and paste the following code into the box titled 'add custom css'. Make sure to change the bolded area with the code of your chosen area.

h2 {
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
background-attachment: scroll;
background-clip: border-box;
background-color: #C5E3EC;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
color: #DD87B4;
font-family: Arial,Verdana,Sans-serif;
font-size: 14px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 1.8em;
margin-bottom: 0.75em;
margin-left: 0;
margin-right: 0;
margin-top: 0.5em;
text-align: center;
text-transform: lowercase;
}

.date-header {
background-color: #ffffff;
}

If you only want to add the colour to sidebar titles, add the following code too.

h3.post-title {
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
background-attachment: scroll;
background-clip: border-box;
background-color: #none;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
color: #000000;
font-family: Arial,Verdana,Sans-serif;
font-size: 18px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 1.8em;
margin-bottom: 0.75em;
margin-left: 0;
margin-right: 0;
margin-top: 0.5em;
text-align: center;
text-transform: lowercase;
}

You'll be able to see the changes instantly in the template designer. If your happy with the changes, just click on 'apply to blog'.

There you have it, yet another way of customising your blog design that's super easy.