Problem with Next/Previous link formatting problem

Developer Support CMS Development
1

I am using the following code to create Next and Previous links at the bottom of each blog post:
<div class=“list-pagination”>
{% if content.next_post_slug %}
<a class=“pagination-btn list-prev-post” href=“/{{ content.next_post_slug }}”>Previous</a>
{% endif %}
{% if content.previous_post_slug %}
<a class=“pagination-btn list-next-post” href=“/{{ content.previous_post_slug }}”>Next</a>
{% endif %}
</div>
The problem I am having is the words Next and Previous are next to each other. I would like to have the word Previous on the other side of the page but I am not sure how. See link below for the current look - Perspective on Payday Loans
Also, I would like to potentially add an image along with the name of the post instead of just the words Next and Previous. See link for example - 10 Digital Assets Every Estate Plan Must Consider
Is this even possible?
Thanks!
- Rick

2

@rickbyrd,

This is one of those questions that has many answers and is based on how you have the page coded. I can give you a general example though.

Here is your markup:

<div class="list-pagination">
	{% if content.next_post_slug %}
		<a class="pagination-btn list-prev-post" href="/{{ content.next_post_slug }}">Previous</a>
	{% endif %}
 {% if content.previous_post_slug %}
 <a class="pagination-btn list-next-post" href="/{{ content.previous_post_slug }}">Next</a>
 {% endif %}
</div>

Notice the text in blue, these are the relevant classes.

First clear floats on your wrapper. According to css tricks this is currently the best way to clear floats:

.list-pagination:after { content: ""; display: table; clear: both; }

Next you just want to float previous to the left and next to the right:

.list-next-post { float: right; }

.list-previous-post { float: left; }

and that’s really all it should take.

3

Jsum,

Thanks for the information! I’m a newbie to all of this. If I understand you correctly, I should replace the relevant classes with the new code for the floating. Like below:

<div class=".list-pagination:after { content: ""; display: table; clear: both; }"> {% if content.next_post_slug %} <a class="pagination-btn .list-previous-post { float: left; }" href="/{{ content.next_post_slug }}">Previous</a> {% endif %} {% if content.previous_post_slug %} <a class="pagination-btn .list-next-post { float: right; }" href="/{{ content.previous_post_slug }}">Next</a> {% endif %} </div>I tired this and it did not change anything so I most likely did this incorrectly.

4

@rickbyrd,

No those are css declarations. Keep the class names as is, and place the css in your style sheet, or in the head of the template wrapped in <style></style> tags.

5

My bad! That makes more sense. Thanks for helping me out!

Rick