Blogger Tutorial: How to Add Blocks of Color Behind Post Text

Blogger Tutorial: How to Add Blocks of Color Behind Post Text

Hey Friends!

When I was making my Terms of Use page yesterday (on GO Designs) I figured out how to add different colours in behind blocks of text.

You can do this with blogger's highlight tool, but you don't end up with a nice rectangular box. Instead you get something like this! Yuck!

It was very easy to do and I think it looks super cool, so I thought I'd share the code with you.

Here's an example right here.

And here's another one with a heading font.

Isn't that neat?

It's so useful for highlighting blocks of text and looks much tidier and more professional.

Okay, so here's the code:

 <div style="background-color: #f93bc1; font-color: black; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">  
 Here's an example right here.</div>  

All you have to do is:

1. copy the code
2. go to your post
3. go to html version (not compose)
4. paste the code where you want it to be
5. replace "here's an example right here" with your own text
6. switch back to compose version and see your pink coloured background

If you don't want pink, then you'll need to change #f93bc1 to a different hex code.

You can find those HERE.

And if you'd like to adjust the spacing on either side of the boxes, just change the 20px in margin-left and margin-right to something else. 

If you're looking for more blogger tutorials you can find them under my label "Blog it Pretty".

 

BTW, if you're interested in colour theory, you might enjoy reading this post about colour meaning, symbolism and psychology at Jen Reviews. 

Thanks for reading!