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


Blogger Tutorial: How to add blocks of colour behind selected text in your blogspot posts. This is a fun and easy tutorial that will jazz up your posts with a burst of colour! #gradeonederful #bloggertutorial #color

Thanks for reading!
 https://madmimi.com/signups/129629/join

No comments

Post a Comment

Thanks for leaving a comment :)