• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Everyday Blogger

  • Home
  • DIY’s
  • About
  • Privacy/Disclaimer
  • Blog
  • Contact
menu icon
go to homepage
search icon
Homepage link
  • Home
  • DIY’s
  • About
  • Privacy/Disclaimer
  • Blog
  • Contact
×

Published: May 24, 2019 by Sienna ·

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.

« Learn How This Blogger Averages 100+ Comments Per Post And Did It In Under a Year
10 Habits of a Savvy Twitterer »

Primary Sidebar

The Everyday Blogger

Hi there, thank you for stopping by! I’m Sienna, I’m all about helping you create a stylish, Pinterest-worthy, all-natural skincare you LOVE. I’m a DIY enthusiast and been creating my homemade skin care recipes from scratch. I thought, they may sound hard, but in reality, they are very easy.

Copyright © 2025 · The Everyday Blogger

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.AcceptReject Read More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT