How to Create “The Perfect Blog Post”

by Derek Halpern · 33 comments

Perfect Blog Post

Is there such a thing as a “perfect blog post?”

The answer is “YES!”

There are 9 essential elements of what I call “the perfect blog post” and each element serves a specific purpose.

(The fact that each element is backed up by psychological, conversion rate optimization, and typographical research is a bonus!)

It’s a revolutionary idea, and you’ll LOVE IT.

What is the perfect blog post… and how can you create it?

Well, if you’re using Thesis and WordPress, it’s EASY, and right now I’m going to show you exactly how to do it.

What Is The Perfect Blog Post?

Before I take you through the steps for creating the perfect blog post from a technical standpoint, you’ve got to know what you’re creating, right?

Right.

Here’s the image (if you can’t see it, see the full version of “the perfect blog post.”):

PerfectBlogPost

As you can see, the specific sections of this blog post that require some “technical know-how” are as follows:

  1. the Half-width image (gotta be able to align the image right)
  2. the sub-head
  3. the soundbite
  4. the call to action at the bottom of the blog post

Some of this is as easy as including some html in your blog post, whereas the final piece, the call to action at the bottom of the blog post, will require you to mess with some code (but don’t worry, it’s easy and we’ve got a tutorial for it).

So, on that note, let’s walk through it…

How to Create the “Perfect Blog Post”

There are 9 components, 4 of which require some technical know-how. Some of it is as easy as a few html tags, others require a few more steps.

No worries though, it’s easy!

1. How to create the half-width image in Thesis

While I call it the half-width image, I don’t actually use 50% width. In reality, I use around 33% width. So, for example, if your content column is 600 pixels, I’d use an image that’s around 200-250 pixels wide.

To create that image, you’ve got to use an image editing program (or the WordPress image editor). Once you’ve got the image, all you have to do is this:

<img src="imagefilehere" class="alignright frame" title="yourtitle" alt="youralt"/>

The key part of this is the class=.

As you can see, it says alignright, and frame. If you’re not sure when you should use a frame, read “when should you use a frame on your images?

2. How to create the sub-head

I know this likely goes without saying for a lot of you, but surprisingly enough, there were some people who did not know what I meant by sub-head.

So, as a quick refresher, a sub-head is a sub-heading. To create that, all you need to use is the <h3></h3> HTML tags.

Simply surround your text in the h3 tags and you’ll be set. Sub-head created!

3. How to Create the Soundbite (better read as tweetable)

This part is KEY.

I’ve written about the importance of soundbites before, but as a quick refresher, here’s the deal:

People LOVE to share quotes on Twitter. When you give them a quote to share, you’re giving them exactly what they want to share.

My friend Pat Flynn (and fellow Thesis user) tested out this soundbite method, and he noticed that 800 people clicked his “click to tweet” link.

When I’ve used it, I’ve had similar results, too. For example, in one article, I put a simple quote below my video “You don’t have to be interesting to not be boring” and loads of people shared that on Twitter too.

Here’s what that looked like:

Now as you’ll notice that I use the soundbite inside of a yellow box. To create the yellow box, all you have to do is add class="alert" to your paragraph tag.

This looks like this:

<p class="alert">"You don't have to be interesting to not be boring"</p>

Why does that happen? Well, in Thesis, “alert” is a default tag that creates that little yellow box. If you don’t want the yellow box, you can use class="note" for a gray box.

Now, the question is, how do you create that little Click to Tweet Link?

You have two options. You can use a website that creates the Click to Tweet link for you, or you can create it by hand.

Quite frankly, I recommend you create it by hand because if you use the website, and that website disappears, all of your click to tweet links will become broken, and that can become a major headache.

How to Create the Click to Tweet Link by Hand

When you click the click to tweet link, here’s what the URL will look like in your URL bar:

https://twitter.com/intent/tweet?text=You+dont+need+to+be+interesting+to+not+be+boring+-+http%3A%2F%2Fbit.ly%2FGDZG3w

As you can see, constructing this URL is quite easy. All you have to do is add what you want your tweet to say after text=

But you can’t just type it any format..

Since you’re constructing a URL, you’ve got to encode the symbols so that your browser knows to add the correct symbols into your tweet.

For the purposes of a URL, you’ll need to encode both your / (back slash), : (colon), and your spaces between words.

(Note: If you decide to use any other symbols, symbols like a ” (quotation) or ‘ (hash mark) you’ll need to encode those too. However, I recommend you don’t use any other symbols in your tweet text to make this as easy as possible)

How do you encode the colon, back slash, and spaces?

The colon is %3A

The slash is %2F

The space is +

Then, when you’re constructing your tweet, all you have to do is take your regular tweet and replace that.

So, for example, lets say you wanted to tweet:

You do not have to be interesting to not be boring – http://bit.ly/GDZG3w/

You’d take the above text and replace all the necessary pieces, and it would look like this:

You+do+not+need+to+be+interesting+to+not+be+boring+-+http%3A%2F%2Fbit.ly%2FGDZG3w

Then, you’d simply add that after the text= portion of the url.

first part of url: https://twitter.com/intent/tweet?text=

second part of url: You+do+not+need+to+be+interesting+to+not+be+boring+-+http%3A%2F%2Fbit.ly%2FGDZG3w

And here’s what it looks like together:

https://twitter.com/intent/tweet?text=You+do+not+need+to+be+interesting+to+not+be+boring+-+http%3A%2F%2Fbit.ly%2FGDZG3w

Then, you’d simply create a normal link in your WordPress editor, and link to the above URL as you just constructed.

What would that look like?

This:

<a href="https://twitter.com/intent/tweet?text=You+do+not+need+to+be+interesting+to+not+be+boring+-+http%3A%2F%2Fbit.ly%2FGDZG3w" alt="You don't need to be interesting to not be boring" title="You don't need to be interesting to not be boring">Click to Tweet</>

And bam.

You’re done!

It looks a lot more complicated than it really is, trust me ;-).

How to Create the Link with the Click to Tweet Website

There’s a website called ClicktoTweet.com that makes creating these links MUCH easier, but the problem is, it creates a short URL.

Whatever you do, don’t use that short url that they create for you. Instead, add that short url into your URL bar and grab the link to the twitter url that it redirects you to.

Then, link to that url. To see what I’m talking about, do this:

click to tweet

See how you type your text into the website there?

When you do that, click “Generate Link.”

Then, take the link it creates for you, and add it into your url bar… and load the website.

Then you’ll see that it redirects you to a ready-made Twitter link that you can use in your blog post.

As an example, take a look at this link here: http://clicktotweet.com/2T1A0

See how it redirects?

Don’t use the ClicktoTweet url. Instead, use the URL that it redirects to when creating your link.

That’s a bit easier to stomach than creating the URLs, but again, once you get the hang of making the URLs, it gets easy. Trust me :-).

How to Create a Call to Action at the Bottom of a Blog Post

Why do I LOVE a call to action at the bottom of a blog post?

Think about it…

If people read an entire article on your site, they often look for what they can do next, right?

Right.

Now you could place any kind of call to action here… like a link to a landing page… or what I prefer to do (as you can see here on DIYthemes and on Social Triggers) is add an opt-in form because it converts well.

Remember, one of the best ways to build your business AND blog is by building your email list.

Question is, how can you add an opt-in form at the bottom of your blog posts?

In Thesis, it’s extremely easy. All you gotta do is add this code in your custom_functions.php file:

function afterpost_email() { 

if (is_single()) { ?>

PASTE YOUR EMAIL SIGN-UP FORM CODE HERE

<?php } }

add_action('thesis_hook_after_post' , 'afterpost_email');

The Bottom Line

Now I’m sure there are people who will debate whether or not this is the perfect blog post, but here’s the deal:

The point of this blog post is to encourage people to read the blog post in its entirety while also encouraging people to share it on social media and subscribe to a newsletter.

And right now, based on my experience, there’s no better way to create a “perfect blog post.”

What do you think?

Will you start using this format?

About the Author: Derek Halpern ran marketing at DIYthemes, and is the founder of Social Triggers. To get more tips on how to be confident, sign up to his list here.

If you enjoyed this article, enter your email below to get free updates!

{ 33 comments }

Duru

Great tutorial on how to construct the perfect blog post.
Thanks for including code examples to create a direct re-tweet, very handy :)
I am probably using around half of these methods and look forward to trying out the rest!

Les Dossey

I have to make a few tweaks and I’ll be tracking with you Derek.

I had not thought of the soundbite which for me is the greatest advice I got from this perfect post.

Thanks for all the great tips, should make it dork proof.

Only the Best,
Les Dossey

Hesham Zebida

Derek , I like the way you explained it, the image looks good to me as well, so yes.. there is a perfect post indeed, which leads to more clicks and conversions!

Call to actions at the end of the post is simply a must!

Mike Turco

Thanks, Derek, for this post with all the how-to details. I’ll definitely use this method in my next post.

Hey, what do you think about replacing standard social buttons with links to your facebook page or twitter page instead. Rather than Tweet This or Plus That, it would be more of an invitation to following you on twitter or circling you on goog+. Would this be good for “building a community” as opposed to “building a popular post”. I mean, building a community is more important to some.

Mike

Rasheed

Hi Mike,

I am by no means an expert, but this is my take on it:

You can’t build a community without having some popular posts. If people “like” you on Facebook, it is not likely that their friends will “like” you as well (though they see it). Similar statements apply to Google + and Twitter (+’s and follows respectively).

However a quotable quote… well, everyone loves sharing quotes. I know this because I look no my Facebook feed and 90% of the non-garbage (sorry, I consider “feeding my cat” a garbage post lol) posts are quotes. Motivational, inspirational, educational… but quotes, nonetheless. And these quotes go viral. Especially if they are in a picture of something equally powerful.

That’s just my opinion, but I think having a “Tweetable” will help your blog go more viral, and as a result, build a community.

Mary

Hi Eric,
I’ve been following for a while. I’m definitely going to test out this structure on my blog posts. I also agree the “soundbite” is such an awesome nugget along with how to code so that it’s easily tweetable. Love it.

I spent two hours today getting a friend set up with Thesis. This theme rocks.
My website showed up at #1 in google this week for one keyword and #2,3 and 4 for my second keyword. Thesis works.
thanks, Mary

Susan Langenes

Wow Derek. This couldn’t have been more perfectly timed.

I literally *just* finished a phone call with a client in which I finally convinced her to write fewer blog posts with better content (IIRC advice from you a few posts ago), and explained the concept of conversion.

Now she’ll be in a position to utilize this great advice!

Liza and John's Garden

HI Eric: Learning a lot from your posts. Presently building another blog with thesis.

thanks,
John

Ramesh

Great bro… Thanks for offering this tutorial with coding. earlier i thought you are again going to say about SEO but after completion, i got some great points. ;-)

Janet Lancaster

Hi Derek
Once again, you give solid, actionable info to improve performance. Does the “sign up to his list here” link to the same list as “…free email updates” or are they two different lists?
Thanks so much!
Janet

Faith

Hi Derek,
Thanks for this! Is there any significance in the fact that you align your half-width image to the right side of the post as opposed to on the left? If so, I’d love the intel on that.

Keller Coleman

Another great tip, I really enjoyed this one. Thanks

Kirk Eisele

Sweet! Is there a “dictionary of Thesis classes” anywhere? I’m wondering what else I can throw into the html of a post to produce pre-designed results…

faisal

Wow, super awesome and insightful post. A must refer for writing long and detailed how to articles ;-)

Philos

All said and done it is perfect.

Shira

Great tutorial and tips to structure and write blog posts, thanks!

Gr├ęgory Marchal

Wow, impressive stuff !

Won’t it be more efficient if we use a custom button instead of the link ?

Even better, why not customize an official Tweet button (with or whitout the counter) to directly Tweet the quote ? (I checked, it’s possible…)

What do you think of that ?

Jeff

Thanks Derek for the great post.

One question (and I apologize for my lack of tech know how): my site currently uses the WP email sign-up widget as well as Thesis. Can I still use the code you provided for the email subscription CTA at the end of a blog post?

If anyone knows the answer to this conundrum I’d be especially appreciative :)

Teo, Coach del Bienestar

Superb as usual!
What I liked best cause I benefited from it… –Class Alert –and –Note– tags. Did not know about them and the fact that I should place the opt-in at the end. Its so simple to do it using the custom_functions.php

Im going for a 20% of the image right now so I better increase it :)

Clap Clap
Tx Derek

muazfaris

hi Derek,

i like about the call to action., it very useful for me and im try to do that for my blogg.. thanks a lot!! :-)

Bui Hong Diep

Thank you so much for such a useful post ! Iam trying to do exactly what you show here.

One again thanks !

Robert Loeder

Been reading your stuff for awhile and it’s always awesome! I am a contractor who pulled off an unlikely miracle after the economy crashed. Two years ago, I locked myself in my office and taught myself how to dominate Google local search. So we got to keep our house and business is booming! As a newbie, I have quite a few dumb questions left in me. Like the soundbite question: When someone clicks the Tweet button, the quote is Tweeted. But how is your blog post connected to that Tweet?

John

Please….. excuse the language but you guys always provide some good shit!
helpful BIG TIME!

Maija

Perfect timing, I was wondering how you did your Click to Tweets! Where can I find a full list of encoding options? I want to use a question mark.

Maija

Ok for anyone else who’s wondering the encoding for a ? is %3f

Rob @ Atlanta Real Estate

Wow, great article. That’s stepping it up!

Bob Young

Derek, I saw you outline the perfect blog structure in your “Blogs that Convert” webinar and really appreciate the additional detail presented here. The ‘tweetable” is a great idea and one I plan to use. The tweetable quote, you use as an example however, “You do not need to be interesting to not be boring,” still has me saying, “Huh?” Perhaps that was your intent.

Shekhar

Again as the title of this post suggests….Perferct blog Post :)

Kevin

Hi Derek,

Great tip on the direct tweet. I just went back and added one to my post for today :).
It’s definitely a good idea to be thinking about a sound bite as you write the post, so I’ll add that step to my process.

Peter Trapasso

Derek,

Thank you so much for sharing this!

Bookmarked, Printed, and pinned to my office wall today.

“Learn it, know it, live it!”

Hat tip if you remember that quote. I have summer on the brain now.

Pete

Debra Eve

Hi Derek, I’ve had my site set up like this from the beginning, just because I found it intuitive using the “Post Image” settings under Design options, which allow you to place an image on the right and frame it using check boxes. Then you just have to plug the image URL in your post’s “Post Image” box. Is there any problem doing it this way?

I have been trying to figure out how to get a sign up after the post, so thanks for that!

Mark

Your posts are awesome and I appreciate them!
I like this idea and I want to implement it, but how to I align the boxes? Do you have a step by step on how to create these boxes so that they all flow like the diagram.
Thanks.

Gouri

Wow! The soundbites thing is amazing. Gonna try it out ASAP.