The Everyday Blogger: 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.

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 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;">
...insert your block quote here...

It is best to put this code snipet in between paragrahs, 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:

So basically, you'll be doing this:

all the code/verbage for your 1st paragraph

paste the block quote snipet here

all the code/verbage for your 2nd paragraph

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

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 snipet.

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.