March 25, 2009

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 comments:

firdaus.a said...

Thanks for sharing ;P
nice simple tips.

Play Games Win Prizes said...

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

-Mike

Sham said...

Small nice tip:)

Anonymous said...

Thank you verrrrry much for this tip ...

bloggerstop.net said...

:)

AB said...

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

RV Quick Tips said...

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

becky.

Maya Safana said...

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

Anonymous said...

Worked great. Thanks so much.

Anonymous said...

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 ?

~*Jessica Rabbit*~ said...

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

h4ck3r14 said...

:)

Michael said...

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!

Colin Bhimsen | Toronto SEO Guru said...

Mobile SEO Toronto

Colin Bhimsen | Toronto SEO Guru said...

Vaughan SEO

Colin Bhimsen | Toronto SEO Guru said...

SEO Toronto

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy