Style Tip: How To Add Magazine-like Block Quotes in Your Posts

A style thing you can do to help visually break up long blog posts is the block quotes like you see in magazines.

Besides looking really cool, the block quotes can help highlight an upcoming point later on in the post, which if intriguing enough, will get your reader to keep reading because they want to get to the juicy quote part.

How to add magazine like block quotes on your post
How to add magazine-like block quotes on your post

Now some code is involved but it’s really easy, so easy in fact that all you have to do is cut & paste what I give you, and then make some minor tweaks, that’s it.

As well, the ability to do block quotes is only possible if your blog platform has an “EDIT HTML” feature where you write your post.

So, this is the code Snippets you will copy & paste:

<p style=”background: white none repeat scroll 0% 50%; color: red; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; opacity: 0.75; float: right; width: 150px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; font-family: Verdana,Arial,Helvetica,Georgia; font-size: 24px; line-height: 26px; text-align: right;”> <span style=”opacity: 0.75;”>…insert your block quote here<span style=”opacity: 0.9;”>…</span> </span></p>

It is best to put this code snippet in between paragraphs, and do this last after your post is all ready written and ready to publish. What you want to look for in your html is the paragraph symbol which is this: </p>

So basically, you’ll be doing this:

</p>all the code/verbage for your 1st paragraph</p>

paste the block code snippet here

</p>all the code/verbage for your 2nd paragraph</p>

The Result Looks Like This

The result looks like this

Using our block quote snippet again, I have highlighted in yellow the areas you will have to tweak to fit your post which again is very minor.

<p style=”background: white none repeat scroll 0% 50%; color: red; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; opacity: 0.75; float: right; width: 150px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; font-family: Verdana,Arial,Helvetica,Georgia; font-size: 24px; line-height: 26px; text-align: right;”> <span style=”opacity: 0.75;”>…insert your block quote here<span style=”opacity: 0.9;”>…</span> </span></p>
  • red is the color of the block quote. You can change the color of your block quote by putting in the color you’d like. I find in this code that it is best to use basic colors like: blue, purple, orange.
  • 24px is the font size of the block quote. 24 is a good size but you might want to make the font size bigger or smaller. Just change the “24” to the size you’d like.
  • insert your block quote here this is where you put in the quote you want to use.

You can change the font style, but for simplicity and usability, I recommend just staying with the font in this code because all browsers (ie. Firefox, Explorer, Safari, Chrome) have the font, and this font is easy and clear for most people to see.

I also recommend keeping block quotes on the right side if you’re blogging in a language that is read from left to right because it’s an easier transition for the reader’s eyes.

If you want to have the block quote sit on the left side, you will need to look for the word “right” in the code, and change it to “left.” The word “right” is in two places in the code snippet.

Hit save, there ya go. For those of you who know code, if you have any other block quote tips to add, please share! We likey very much. 

"Find your passion is in life, and do what you can to integrate that into your work life. That's not to say you won't have occasional frustrations in your job - that just goes with the territory - but at least you'll feel better inside, and that, over time, will mean more to you than you might think. "
~ Edward Whitacre, Jr.

Leave a Comment

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

Scroll to Top