How Put Border and Background on Selected Part of Blog Post

Tweet

I was surfing the net when I found out some blogs have borders and/or background that gives emphasis on a particular part or paragraph in their blog post like recipes and quotations. The part is highlighted or has a background which helps capture reader’s interest.

At first, I thought it was a photo inserted on the body so it is very easy to do using any of your favorite photo-editor. But when I tried to select the text it can be highlighted meaning it is part of the body and not a picture.

I keep on finding out how to do it and here’s what I got:

Create a new post on your blogger page and type the content of your blog as usual.

When you are already on the part that you want to have highlight or border, shift your page in HTML mode.

Click the HTML button (with red box)

Copy and paste the following code :

style="background-color: pink;border: 5px dotted black; padding: 10px;"

Add your content here.

(See example photo below)

I used dotted, black border and pink background as an example. If you only want to have a border, delete "background-color: color name or hex code" and if you only want a background, just delete "border: 5px dotted color name or hex code".

After inserting the code in HTML mode

Click the “Compose” button, continue on the remaining contents and post. You will have now have something like the one below and continue with the remaining part of your blog post.

After going back to Compose Mode

You can also customize the border and color according to your preferences.

For the color:
Enter the name of the color you want or simply enter a hex code (check it HERE).

For the border:
Choose the style from solid, dotted, dashed, double, ridge, inset, outset or groove. Border width can be adjusted by changing the number prior to “px”

For the padding:
I am not a “techie” person and I really don’t know what padding means, but according to what I read, having this will prevent your texts touch the border line.

Publish your blog entry and you will have something like this:

Blog post with background on selected  part

I hope this trick or tip helps a bit in improving your blog.