Problem with Next/Previous link formatting problem

[rickbyrd]

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 - https://www.bigpictureloans.com/blog/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 - https://www.altusfinancial.com.au/latest-news-1/10-digital-assets-every-estate-plan-must-consider
Is this even possible?

Thanks!
- Rick

[Jsum · Accepted solution]

@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. 

[rickbyrd]

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.

[Jsum]

@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.

[rickbyrd]

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

Rick