Highlight Background Color Bottom Half Of The Text Of Blogger Post Title

The other day I came across this site where the titles and its sub-titles with highlighted background-color, which covered only the bottom half of the text.

I quite like this marker pen highlight effect, which emphasizes just the lower half section of the text, as shown below.

I did my own research, using the Inspect Element (Q).

After some tinkering and try-outs, I managed to find out how it is done.

Highlight Background Color Bottom Half Of Blog Post Title Text For Blogger

Here is the tutorial on how I did it:

1. Log into your Blogger account.

2. Click the "Theme".

3. Then click "Edit HTML" button.

4. Make sure the cursor arrow icon in inside the box with all the coding.

Note: You do this by moving the cursor arrow inside the box and then left click it.

5. Using one finger to press down the key "Ctrl" without letting go, then use another another finger to press the letter "F" key.

6. Instantly a search box will pop up at the top right hand corner with the word "Search:"

7. Type in: post-title

8. Press the "Enter" key a couple of times (depending on your template), until you see this line of code:

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

9. Now delete the above set of code and replace with this:

h3.post-title, .comments h4 .halfbackground{
  font: $(post.title.font);
  margin: .75em 0 0;
display:inline-block;
background-image: -moz-linear-gradient(bottom, #7ff7b8 50%, #fff 50%)
}

Note: The color code #7ff7b8 is just an example. You need to replace the color code to your own choice.

You can get the color code here.

Warning: Before you do this, make sure you save the original code in your Notepad.

In case you screwed up, you can replace back the original code.

10. Finally click the orange color "Save template" button above.

11. That's all.