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.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

16 comments

Write comments
March 26, 2009 1:51 PM delete

Thanks for sharing ;P
nice simple tips.

Reply
avatar
March 29, 2009 4:53 PM delete

This is the GREATEST way to make a reader pay attention to something important...or maybe a few links ;)

-Mike

Reply
avatar
Anonymous
April 22, 2009 11:01 AM delete

Thank you verrrrry much for this tip ...

Reply
avatar
AB
May 27, 2009 5:28 AM delete

Sorry dear, I really didn't know about that mistake.

Check url :http://exclusivearena.blogspot.com/2009/05/blogger-widget-multi-drop-down-menu.html

Reply
avatar
February 22, 2010 1:31 AM delete

Great tool to show some important information to the readers at first glance :)

becky.

Reply
avatar
May 09, 2010 5:06 AM delete

its working good...... thanks so much.....
this my blog [ http://super-url.blogspot.com ] i used this...
thanks again....

Reply
avatar
Anonymous
June 22, 2010 3:09 PM delete

Worked great. Thanks so much.

Reply
avatar
Anonymous
May 11, 2011 7:05 PM delete

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 ?

Reply
avatar
August 16, 2011 4:03 PM delete

Ah, thank you! This is by far the simpilist explination I have found so far. :-*

Reply
avatar
August 09, 2012 3:06 PM delete

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!

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon