Blog post navigation back to blog page?

Site URL: https://www.daniellewickesjewelry.com

Hi! Working in the Brine/Jaunt template and I have a question regarding the blog page/posts. When on a blog post is there a way to add navigation back to the blog page? The blog post has the arrows to go the “Previous” & “Next” blog posts, but no navigation options I can find to add a return to the blog page within the blog posts. What am I missing? Thanks in advance!

Password: cre82020!

Blog page: https://www.daniellewickesjewelry.com/patternstutorials

Blog post: https://www.daniellewickesjewelry.com/patternstutorials/8th-post

Do you want to actually back to the "home page" of the blog, or just back to the top of what page you are on? if on a long post, a back to top button would not be a bad thing to have considering the first post in the blog is also the latest one and that changes. A back to top button can float along the bottom corner of the page. I have one on my site, site wide actually. Its an up arrow, but could say "top" https://myrandomviews.com/storysummary

Morning! Thanks for the reply!

I would like the visitor to easily to return to the blog homepage from the blog post page. Example - on the blog post page, in addition to the option of being able to navigate to the "previous" and "next" blog posts, I would like an option of returning to the blog homepage (see image below).

Once the visitor is on the blog post there is no way to return to the blog homepage unless I provide a link in the header or footer. Seems odd that isn't an option. I keep searching Site Styles and settings to see if I am missing something but it doesn't seem to be there.

Thanks for the top of page navigation tip! Will keep that one in the bag of tricks for future use.

17 hours ago, reneelong said:

Morning! Thanks for the reply!

I would like the visitor to easily to return to the blog homepage from the blog post page. Example - on the blog post page, in addition to the option of being able to navigate to the "previous" and "next" blog posts, I would like an option of returning to the blog homepage (see image below).

Once the visitor is on the blog post there is no way to return to the blog homepage unless I provide a link in the header or footer. Seems odd that isn't an option. I keep searching Site Styles and settings to see if I am missing something but it doesn't seem to be there.

Thanks for the top of page navigation tip! Will keep that one in the bag of tricks for future use.

Try adding to Home > Settings > Advanced > code INjection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('nav.BlogItem-pagination').append($('<a href="/">Back to Home</a>'));
	});
</script>

--

If it doesn't work, please keep the code & let me know. I will check again.

I don't know if the above code puts a blog "home"  nav link between pre/next, would be nice if it did. There is simple thing you can do, just put a page link button in the blog footer, connected to the blog, press the button, takes you right back home to first page or link it to a blog summary page if you are using one. I may add one myself, had thought of that until I read this post. 

On 4/1/2020 at 5:18 AM, tuanphan said:

Try adding to Home > Settings > Advanced > code INjection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('nav.BlogItem-pagination').append($('<a href="/">Back to Home</a>'));
	});
</script>

--

If it doesn't work, please keep the code & let me know. I will check again.

This code isn't working for my site.  Is there another code I could inject?

1 minute ago, CBB said:

This code isn't working for my site.  Is there another code I could inject?

Can you share link to blog page?

4 minutes ago, CBB said:

Here you go.

Add to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('.item-pagination[data-collection-type^="blog"]').append($('<a href="https://beaverhero.com">Back to Home</a>'));
	});
</script>

8 minutes ago, tuanphan said:

Add to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('.item-pagination[data-collection-type^="blog"]').append($('<a href="https://beaverhero.com">Back to Home</a>'));
	});
</script>

 

Thank you very much.  This is great.

Please, do you know how to edit the position and color?  The color is white right now for some reason. And I'd like it centered.

Use new code, I think this code is better, I can check color/position easier

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('<a href="https://beaverhero.com" class="tuan">Back to Home</a>').insertAfter('.item-pagination[data-collection-type^="blog"]');
	});
</script>

3 hours ago, tuanphan said:

Use new code, I think this code is better, I can check color/position easier

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
  $('<a href="https://beaverhero.com" class="tuan">Back to Home</a>').insertAfter('.item-pagination[data-collection-type^="blog"]');
	});
</script>

 

I just added it, but it is still in an odd position.  Is there I way I can explore changes with it myself? 

Yes. But if you insert new code, I can give code to change color/position easier.

9 hours ago, tuanphan said:

Yes. But if you insert new code, I can give code to change color/position easier.

I just added it back.

Keep above code & add this to Blog Page Header

<style>
  section.item-pagination + a {
    display: block;
    background: #f7f6f3;
    text-align: center;
    font-size: 30px;
    color: black;
}
</style>

On 4/1/2020 at 5:18 AM, tuanphan said:

Try adding to Home > Settings > Advanced > code INjection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('nav.BlogItem-pagination').append($('<a href="/">Back to Home</a>'));
	});
</script>

--

If it doesn't work, please keep the code & let me know. I will check again.

Hi! I'm trying to use this on my 7.0 site, but I have AJAX enabled, and it only works if I reload the page. Any way to force this to work with AJAX? I'd like to keep AJAX loading if possible.

Thanks!

On 6/3/2021 at 10:08 PM, farrahfox said:

 

Hi! I'm trying to use this on my 7.0 site, but I have AJAX enabled, and it only works if I reload the page. Any way to force this to work with AJAX? I'd like to keep AJAX loading if possible.

Thanks!

Hi. You need to disable Ajax