Highlight Text In Posts Through Colored HTML Text Boxes

By highlighting specific regions of your post/article, you make it easier for your readers to understand the post in a better way. Although in Blogger, you can tweak the quote boxes (like the gray boxes, I use in my blog to show HTML codes), but as it is done directly in the template of the blog, so it will be applied to the whole of your blog, and therefore the boxes will have same appearance every time you use them anywhere in the blog.
So here’s another easy method through which you can control and change all the settings like background color, text color size, font style etc. every time you use these boxes:
An example:

The Best way to make your dreams,
come true is to wake up.

To display a similar box in your blog, use this code:

<div align=”center”>
<div style=”background-color: #cccd94; border: 1px solid black; font-family: sans-serif; font-weight: bold; padding: 10px; text-align: center; text-transform: capitalize; width: 300px;”>
<i>The Best way to make your dreams,
come true is to <span style=”color: blue; font-weight: bolder;”>wake up.</span></i></div>
</div>

You can adjust the colored parts in the code to match your blog and requirements.

You may also like to read this post:
How to show different background color or image for separate posts or paragraphs.

16 thoughts on “Highlight Text In Posts Through Colored HTML Text Boxes

  1. thanks for your help.
    my quastion is..i want highlight my post title what should i do?
    my post title in blogger is ( red line ) and i wanted to color it with red color but as you know the post title it comes in sapreate box so my quastion how would be change color for the title only ?

  2. This has been very helpful. For someone who don't know css styling or html (like me) I was able to make changes to my post's layout because of the tutorials I find here.

    Keep up the great work. You guys are helping tons of blogger out there. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *