Outbrain and Blogger Read More Links: A Better Solution

1. The Issue

As it stands, both the read more link and the ORW are contained in div.post.hentry.uncustomized-post-template and are outside of the post content contained in div.post-body.entry-content.

The ORW appears to have a mind of it’s own and doesn’t respect the positioning of other elements in the same container as it always appears above those elements. Additionally, if you want the ORW to appear at the bottom of a post it seems impossible to have it displayed anywhere other than in div.post.hentry.uncustomized-post-template.

The answer then is to move the read more link into div.post-body.entry-content.

2. The Fix

Unlike my previous workaround this solution doesn’t require any layout changes to the ORW. You simply need to edit your template. Before making any changes to your template you should of course save the current one.

From the Blogger Dashboard select Layout > Edit HTML and ensure Expand Widget Template is checked.

Next, locate the line of code containing data:post.hasJumpLink in your template. This is the start of the code block that controls whether or not a read more link is displayed.

<!-- Read More Link Code -->
<b:if cond='data:post.hasJumpLink'>
	<div class='jump-link'>
		<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
	</div>
</b:if>
<!-- //Read More Link Code -->

Copy and then delete the entire code block.

Now find the line of code containing <data:post.body/>. This is where the post content is contained.

<data:post.body/>
	<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Paste the read more link code you copied earlier immediately above the closing </div> tag, like so:

<data:post.body/>
	<div style='clear: both;'/> <!-- clear for photos floats -->
	<!-- Read More Link Code -->
	<b:if cond='data:post.hasJumpLink'>
		<div class='jump-link'>
			<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
		</div>
	</b:if>
	<!-- //Read More Link Code -->
</div>

That’s it. Save the template and you’re done.

3. Conclusion

After applying this fix the post snippets still include a read more link, but unlike my previous workaround they also include the ORW which, more importantly, is now below the read more link.

As far as I can tell, there appear to be no adverse effects. The read more link continues to function as it should.