Manually Creating your Related Posts

We don’t like the related posts plugin, per se, mainly because you can’t control what’s in it. We’d much rather you drive traffic to posts that you want the audience to read. Sales pages, highest paying Adsense pages, ebooks, top posts. . . the things that make a difference for your business.

So we’re giving you a piece of code you can copy and paste at the bottom of your blog posts to make this happen. This particular code doesn’t have words or captions. So you’d use this with Pinterest like pins that speak for themselves.

Here’s an example from Lisa Woodruff’s site: Organize365.com. In this example I took the images that were already on her pages and cropped them to fit this “matrix”:

Screen Shot 2015-01-13 at 1.53.02 PM

Here’s what that code looks like:

Now let’s break that down into the parts so you can see how you’re supposed to manipulate it for you:

Table Code Explanation

Tables start with <table> so browsers know there is a table coming. And it has to end with </table> so they know that it ended, too.

Then there are two main parts:

<tr> = “the row” . . all things after <tr> are in the same row of the table until you end the row with</tr>

<td> = “think down” . . . that’s the only way I can remember that. It’s the column in the row. And columns go down.

If you want a related post area below your post to be one row of three pictures, you’d start it with <tr> because it is a row, then you’d have to 3 <td>’s. That would look like this:

Even though it is written vertically, the td’s are still going to be three images going across the page. That’s simple, right?

Adding Links and Images

If we pressed Publish now, there’s no language in there to indicate what picture to show or where to link it. So we need three of those between the <td>’s.

That would look like this:

<table>

<tr>

Adding Dimensions

But it’s still missing something. Your blog post width on your site is different than other peoples. So you want to add width information to make sure it doesn’t push you sidebar out. You could do that three ways.

1. Add width=”600″ to the table heading

2. Include images that are the right size. So if your width is 900 and you have 3 images, make sure your images are no more than 300 px wide each

3. Add width dimensions to the images themselves in the code.

OPTION 1. ADDING WIDTH PARAMETERS TO THE TABLE

<tr>

OPTION 3. ADDING WIDTH PARAMETERS TO THE IMAGES

<table>

<tr>

Here’s the code

So take this code as the example, copy it and paste it at the bottom of a blog post. Then you have to adjust the site width for your site. The the last step is to replace the Organize365 links with the pages you want your traffic to go and the Organize365 images with url’s of the images you want to use.

Here’s what that code looks like:

Table Code Explanation

Adding Links and Images

Adding Dimensions

OPTION 1. ADDING WIDTH PARAMETERS TO THE TABLE

OPTION 3. ADDING WIDTH PARAMETERS TO THE IMAGES

Here’s the code

You Might Also Like

Create Trackable Links – Google URL Builder

How to add the Read More Button

Redirecting Links and Using a Virtual Assistant