Adding previous and next article button to Blog Post

[Cody_w36]

Hello, I would like to add a previous and next article button to the bottom of my blog posts. This is what I've put together, but I'm having issues running it this way.

I would also like to have physical buttons, rather than the text links.

Thank you in advance.

<div class="grid">
{% if blog.next_article !- nil %}
<div style="float: right; clear: right">
<a href="{{ blog.previous_article.url }}"><h3>Next Workout</h3></a>
</div>
{% endif %}

{% if blog.next_article !- nil %}
<div style="float: left; clear: left">
<a href="{{ blog.next_article.url }}"><h3>Previous Workout</h3></a>
</div>
{% endif %}
</div>

[LitCommerce]

Hi @Cody_w36,

Please change all code:

<div class="grid">
  {% if blog.next_article !- nil %}
    <div style="float: right; clear: right">
      <a href="{{ blog.previous_article.url }}">
        <svg class="icon icon--tail-left" viewBox="0 0 24 24" role="presentation">
          <path fill="currentColor" d="M1.293 11.293L9 3.586 10.414 5l-6 6H22c.553 0 1 .448 1 1s-.447 1-1 1H4.414l6 6L9 20.414l-7.707-7.707c-.391-.391-.391-1.023 0-1.414z"></path>
        </svg>
      </a>
    </div>
  {% endif %}
  
  {% if blog.next_article !- nil %}
    <div style="float: left; clear: left">
      <a href="{{ blog.next_article.url }}">
        <svg class="icon icon--tail-right" viewBox="0 0 24 24" role="presentation">
          <path fill="currentColor" d="M22.707 11.293L15 3.586 13.586 5l6 6H2c-.553 0-1 .448-1 1s.447 1 1 1h17.586l-6 6L15 20.414l7.707-7.707c.391-.391.391-1.023 0-1.414z"></path>
        </svg>
      </a>
    </div>
  {% endif %}
</div>

 Hope it helps!

[Cody_w36]

Thank you!

for some reason I can’t save the file though, shows a sentax error from the !- nil. 

[LitCommerce · Accepted solution]

Hi @Cody_w36,

Please change code:

<div class="grid">
  {% if blog.next_article %}
    <div style="float: right; clear: right">
      <a href="{{ blog.previous_article.url }}">
        <svg class="icon icon--tail-left" viewBox="0 0 24 24" role="presentation">
          <path fill="currentColor" d="M1.293 11.293L9 3.586 10.414 5l-6 6H22c.553 0 1 .448 1 1s-.447 1-1 1H4.414l6 6L9 20.414l-7.707-7.707c-.391-.391-.391-1.023 0-1.414z"></path>
        </svg>
      </a>
    </div>
  {% endif %}
  
  {% if blog.next_article %}
    <div style="float: left; clear: left">
      <a href="{{ blog.next_article.url }}">
        <svg class="icon icon--tail-right" viewBox="0 0 24 24" role="presentation">
          <path fill="currentColor" d="M22.707 11.293L15 3.586 13.586 5l6 6H2c-.553 0-1 .448-1 1s.447 1 1 1h17.586l-6 6L15 20.414l7.707-7.707c.391-.391.391-1.023 0-1.414z"></path>
        </svg>
      </a>
    </div>
  {% endif %}
</div>

[Cody_w36]

That did it! Would love if the CSS looked like one of my other buttons though. 

 

[LitCommerce]

Hi @Cody_w36,

Please send me the link showing this, I will help you check it

[Cody_w36]

It’s near the bottom of this page. 

HTTPS://barbellbasecamp.com

[LitCommerce]

Hi @Cody_w36,

Please change all code:

<div class="grid">
  {% if blog.next_article %}
    <div style="float: right;clear: right;margin-right: 30px;">
      <a href="{{ blog.previous_article.url }}" 
		style="
			height: 44px;
			width: 44px;
			cursor: pointer;
			background-color: var(--white-color);
			border-radius: 50%;
			color: #8d8d8d;
			display: inline-flex;
			align-items: center;
			text-transform: none;
			justify-content: center;
		">
        <svg class="icon icon--tail-left" viewBox="0 0 24 24" role="presentation">
          <path fill="currentColor" d="M1.293 11.293L9 3.586 10.414 5l-6 6H22c.553 0 1 .448 1 1s-.447 1-1 1H4.414l6 6L9 20.414l-7.707-7.707c-.391-.391-.391-1.023 0-1.414z"></path>
        </svg>
      </a>
    </div>
  {% endif %}
  
  {% if blog.next_article %}
    <div style="float: left; clear: left">
      <a href="{{ blog.next_article.url }}"
		style="
			height: 44px;
			width: 44px;
			cursor: pointer;
			background-color: var(--white-color);
			border-radius: 50%;
			color: #8d8d8d;
			display: inline-flex;
			align-items: center;
			text-transform: none;
			justify-content: center;
		">
        <svg class="icon icon--tail-right" viewBox="0 0 24 24" role="presentation">
          <path fill="currentColor" d="M22.707 11.293L15 3.586 13.586 5l6 6H2c-.553 0-1 .448-1 1s.447 1 1 1h17.586l-6 6L15 20.414l7.707-7.707c.391-.391.391-1.023 0-1.414z"></path>
        </svg>
      </a>
    </div>
  {% endif %}
</div>

[Nursahmayi]

Hello. I also used this code and it worked. However, is it possible to achieve this appearance?: https://prnt.sc/s-f9SJI1wSs- 

[iamEkho]

Has anyone provided code for the appearance you are asking about?  I would be interested as well.

[johstrom]

Hi,

I can't get this to work properly. I got around 30 blog posts in a certain blog and have implemented the accepted solution, but the links doesn't deliver "next" and "previous" blog posts, instead it delivers only two different blog posts. 

This is the blog: https://bok.hstrom.se/blogs/boktips-referat

The "next post" option always (static) leads to the second first post in the blog, except when I go that post, then it works and goes to the third post. But on the third post, it leads back to this second first post blog... 

The "previous post" option always leads to the most recent blog post in the blog, except when I is viewing the most recent post, then it points to the next recent post (as it should).

So only on 2 blog posts the liquid code works properly... Any idea? 

This is my code:

<div class="page-width">
<div class="grid" style="display:flex;align-items: center; justify-content: center;">
  {% if blog.next_article %}
    <div style="float: right;clear: right;margin-right: 30px;">
      <a title="Tidigare inlägg" href="{{ blog.previous_article.url }}" 
		style="
			height: 44px;
			width: 44px;
			cursor: pointer;
			background-color: var(--white-color);
			border-radius: 50%;
			color: #8d8d8d;
			display: inline-flex;
			align-items: center;
			text-transform: none;
			justify-content: center;
		">
        <svg class="icon icon--tail-left" viewBox="0 0 24 24" role="presentation">
          <path fill="currentColor" d="M1.293 11.293L9 3.586 10.414 5l-6 6H22c.553 0 1 .448 1 1s-.447 1-1 1H4.414l6 6L9 20.414l-7.707-7.707c-.391-.391-.391-1.023 0-1.414z"></path>
        </svg>
      </a>
    </div>
  {% endif %}
  
  {% if blog.next_article %}
    <div style="float: left; clear: left">
      <a title="Nästa inlägg" href="{{ blog.next_article.url }}"
		style="
			height: 44px;
			width: 44px;
			cursor: pointer;
			background-color: var(--white-color);
			border-radius: 50%;
			color: #8d8d8d;
			display: inline-flex;
			align-items: center;
			text-transform: none;
			justify-content: center;
		">
        <svg class="icon icon--tail-right" viewBox="0 0 24 24" role="presentation">
          <path fill="currentColor" d="M22.707 11.293L15 3.586 13.586 5l6 6H2c-.553 0-1 .448-1 1s.447 1 1 1h17.586l-6 6L15 20.414l7.707-7.707c.391-.391.391-1.023 0-1.414z"></path>
        </svg>
      </a>
    </div>
  {% endif %}
</div>
</div>

If I 

[iamEkho]

I have this same problem - it is extremely frustrating when you are trying to have a blog that goes sequentially, like chapters in a book.  My blog is https://iamekho.com/blogs/i-am-ekho and while I was able to use the 'publish' date to force it, when on mobile there is some sort of built in 'next' article when you scroll far enough through one and it goes backwards.  SUPER FRUSTURATING>