Creating a Block of Emphasis Text for Your Blog Post

A Chef Has Excellent Ingredients AND a
Well Thought Out Presentation

Creating an interesting blog post is first of all dependant on relevant information that the reader wants to read. The other essential consideration to a successful post is how you present the information. A good chef may have the best ingredients in a dish but she doesn't just slap it down as a messy plate of food!

A good blog post starts off with proper white spacing. You don't want to just write a singular run on paragraph that goes on and on and on. We call that the wall of words! Proper text sizing is also important. Too small of text is another mistake to avoid. It makes it hard to read for older eyes (raises his hand). 

Adding a photo or two also will help bring a layer of interest to the story to offset the text. Our eyes are drawn to photos and graphics. Have you ever been in a situation though, where you are just having a hard time finding a photo that connects well to the story? 

Here's something that you can consider sometimes doing in your blog posts: Create a block of emphasis text to highlight a phrase or excerpt from the body of your text. This is where you would make a copy of text you want to highlight to draw interest to a main point. If you make a copy of the emphasis text and make it nice and big, the reader's eyes will be drawn to the point of interest. The goal is to make them want to dig into the body of the text to make them get more information.

theverge.com Uses Emphasis Blocks of Text

Take for instance on the tech website theverge.com, they often do this in their articles and it illustrates how you can make your presentation more appealing even when there is a lack of a corresponding photo to use. Notice the sample on the right how it looks when they do this block of emphasis text.

To illustrate it further, notice below the emphasis text that I created to draw interest to the body of text. I took a portion of a recent blog post, "The Sun Wasn't Shining" by Dick Greenberg, to illustrate how we might do this in an ActiveRain blog post:

 (Excerpt...) So the day before the scheduled closing - which the sellers said they would not attend if our buyers had not signed the lease transfer - we were faced with three choices:

• Cancel the contract, or
• Refuse to transfer the lease, go to the closing, and if the sellers didn't close, declare a seller default and seek legal redress, or
• Accept the lease and close as scheduled.

The first choice was unacceptable - the buyers wanted the home and in fact had closed on their existing house that morning, so they were homeless.

The second choice, according to the buyers' attorney, was a legal slam dunk, but possibly could have resulted in several years of litigation before resolution.

So, very reluctantly, they took the third choice, accepted the transfer of the lease and its $18K obligation, closed and moved into the house.

Now, let's go over the few points that you will need to know in order to do this for yourself in your own posts.

First we need what we web developers call a 'container' for our text. In the post editing toolbar, we can use the table button to create a container for us. We will insert a one cell table. The table will come in very small. That is easily fixed as we drag the handle on the right edge to give the table a width about a third of the way across our text area. Then we can type our emphasis text inside the cell. Next, select the text and choose a font size from the toolbar that is nice and big. For instance, in the sample above I chose 24pt size. While our cursor is anywhere inside the table, we can choose the 'Table Properties' option on the table toolbar button. One of the choices we can select is Alignment, we will choose "Right". Now the whole table slides over to the right side with the main text wrapping around on the left side. You can then drag the square located on the middle of the left edge to adjust the width to your liking. Finally, for a little 'visual anchor' to the graphic, you can put a horizontal line under the text by using the 'horizontal line' button on the toolbar.

Appended note 2017: HTML5 spec no longer honors the table attribute "cellpadding" which is what the blog editor uses in "Table Properties" (and what I show in the video). The workaround that I suggest then for this is to put two spaces before the words in each line of text in the table. So, in other words, you would type a few words, press RETURN (shift+RETURN, if you want your line spacing tighter). Type a two spaces, then a few words, press RETURN again, et cetera. These extra spaces at the front will give you white space on the left.

The above description shows you there are just a few steps involved in being able to do this. However, it would be a little confusing for most to understand if I only gave the written instructions. Let  me show you in the below video how easy the above steps are (best viewed using the full screen button located on the lower right corner of the video, or click here to see the video in a full frame window)

Thanks for joining me today in Craig's Classroom with hopefully another tech tip that you can put to use! If you think to come back and post a link to a future post where you try out this tip, I'd enjoy seeing it! :)