Outbrain and Blogger Read More Links: A Better Solution

O
A a couple of days back I posted a workaround for using read more links and Outbrain’s Rating Widget (ORW) in Blogger….
“As you’ve no doubt noticed I use post snippets or read more links on my blog using Blogger’s jump-links code. I’ve also recently added the Outbrain Rating Widget (ORW). Unfortunately, the two don’t play well together as the ORW is always displayed above the read more link and I’d rather it appeared below, or failing that, not at all.”
The workaround I posted isn’t particularly elegant and it has a couple of downsides. Afterwards, I got to thinking that there must be a better way. Well, there is and it’s so deceptively simple and effective that I’m ashamed to admit that I didn’t think of it before.

 

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:

Dummy Content
<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.

 

About the author

A native Brit exiled in Japan, Steve spends too much of his time struggling with the Japanese language, dreaming of fish & chips and writing the occasional blog post he hopes others will find helpful.

7 responses

Leave a Reply to Steve Cancel reply

7 Comments

Steve

Recent Comments

Recent Posts