Solved

Adding previous and next article button to Blog Post

Cody_w36
Tourist
8 0 1

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>

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 744

This is an 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>
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 11 (11)

LitCommerce
Astronaut
2860 684 744

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Cody_w36
Tourist
8 0 1

Thank you!

 

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

LitCommerce
Astronaut
2860 684 744

This is an 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>
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Cody_w36
Tourist
8 0 1

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

E11B8D25-9261-439F-A90B-B61B4C3B14F5.jpeg

LitCommerce
Astronaut
2860 684 744

Hi @Cody_w36,

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

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Cody_w36
Tourist
8 0 1

It’s near the bottom of this page. 

HTTPS://barbellbasecamp.com

LitCommerce
Astronaut
2860 684 744

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>
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Nursahmayi
Visitor
1 0 1

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

iamEkho
Tourist
12 1 0

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

~ Ekho
www.iamEkho.com
johstrom
Excursionist
19 0 2

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
Tourist
12 1 0

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>  

~ Ekho
www.iamEkho.com