Use Colorful Underline With Different Styles For Your Posts

If the topic of your blog is not about travel, food, or photograph (contain lots of pictures), it means the contents of your articles are mainly text. Maybe it will be more difficult to catch readers' eyes.

To attract readers' attention, we could add some colors in our posts. Also, some colorful underline would be a great idea! This post will guide you how to add different colorful underlines for important, emphasized texts or sentences.

(Pic from: ASE Buzz-Picasa)

1. MAKING COLORFUL UNDERLINES

Firstly, let's see some pretty underlines:











The source of these underline images are from this page.

Thanks to the original maker, we don't have to spend much time making the underlines by hand. But we could still make our own ones, such as this one:



the tips for making underline image:

• keep all images with same height, such as 22px.
• transparent .PNG format is preferred.
• to prevent the underlines from covering the text/sentence partially, it's better to keep underlines shorter than 4px.

Next, I'll explain how to use HTML/CSS skills displaying these colorful underlines under text/sentence in our blog (which means you need to have basic HTML/CSS knowledge in order to understand this post).

2. CUSTOM HTML TAG

A. MAKE YOUR OWN TAG

There are two ways to use HTML tag for colorful underline:

Original short HTML tag: such as em, tt..etc, unless you don't need to use them, otherwise you have to keep these tags in mind for the purpose of underline.
Make new short HTML tag: such as red, blue..etc, it will be easier to remember for the purpose.

If you would like to use two styles of red underlines, then one red tag is not enough. Under such condition, you could make two tag: r1 and r2.

Also, if you think blue is not short enough, you could make bl tag instead.

The point is, just remember which HTML tag stands for which style of underline.


B. OLD IE

One thing we have to realize: IE8 or lower version of browser doesn't support custom HTML tag.

Maybe seldom users still use IE8 now, but if you do care IE visitors, there is one compatible way for old IE:

a. Dashboard → Template → Edit HTML

b. Click into template area → press Ctrl-F to search the string </head>

c. Paste the following code just before this line:

<script type='text/javascript'>
document.createElement("blue")
document.createElement("r1")
document.createElement("r2")
</script>

d. Replace the blue text with your own HTML tag name. Just delete the lines which contain the tag you don't need, and just add extra lines in the same format which contain custom tags you need.

3. THE CSS

Please follow the steps below:

a. Dashboard → Template → Edit HTML

b. Click into template area → press Ctrl-F to search the string </head>

c. Paste the following code just before this line:

<style>
b1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif6WuOgbna9SIPGDvgql_-U0ENpf-OwkRqYVbjKpKN5rld8tJOep-2Sh1wPTowypZ8BV2zKiilpwK0egH47qaHTgreoNEAvCcUTt3sU6_gqyMN9DcBQ1mZrei_HMy9TgovcbQGvEAdwMD4/s1600/blue.png) repeat repeat bottom;
line-height: 22px;
}

g1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV8F1oY0SNY64q8OSDavcTT-JeUytmt-_uVpKgC6WfC9phECuvY7bniRtlN9kvOboRN3Zz2UBo6_OsqO-BPTNx43kjdo8JCXY0eNHVdvfCipMG0-rblAoByRwv97m5CjUT3vDfGWjj5Ozg/s1600/green.png) repeat repeat bottom;
line-height: 22px;
}

r1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAmVArI0j8JMv0hyL3AYHTYY4OfGg9_Z89VXIPvmqTX9oqfA6DpcBvYEQE415EjJlcy30pPmemPdDkd9vQXuD4oF3XLhdvTuNy0XEHvRATS43b0zNRs8DeXxhf3JExU3AQTG33agFWF5jE/s1600/red.png) repeat repeat bottom;
line-height: 22px;
}
</style>

• the blue text "b1" is short for "blue", and "g1" for "green", and "r1" for "red".
• please set "b1" as your custom HTML tag name, such as "blue"; likewise change "g1" as "green", or "r1" as "red".
• if you would like to use custom underline image, please replace the green image url with yours.
• if the height of your underline image is not 22px, just modify "22px" as correct one.

4. DISPLAY COLORFUL UNDERLINE

The final step is easy, just use the custom HTML tag to wrap the text/sentence, then you could see the colorful underline. Here is the example, just edit your Blogger post, switch to "HTML mode", the content might like this:

First paragraph: <b1>Use blue underline for this sentence.</b1>

Second paragraph: <g1>Use green underline for this sentence, but we insert more content to become two lines, just to show the underline could display completely.</g1>

Third paragraph: <r1>use red underline for this sentence.</r1>


After saving, the post will display as below:

First paragraph: Use blue underline for this sentence.

Second paragraph: Use green underline for this sentence, but we insert more content to become two lines, just to show the underline could display completely.

Third paragraph: use red underline for this sentence.

Though it will take some time for the HTML/CSS setting, after finishing, it's very easy and convenient to apply the custom HTML tag in the post. Just give it a try and colorize your key points in the content!