'Back to all blogs' button

Site URL: https://processworkuk.squarespace.com

Hi there,

Is there a way to add a 'Back to Blogs' button at the top left-hand side of the individual blog pages, the same as you see on Events pages?

Thanks,

Alex

Sure, just add a button block with a link to your blog page header. I have one at the bottom of all my individual blog posts in the footer. I think it works better at the bottom of a post than at the top. It would be a bit close to the NAV bar don't you think?

https://myrandomviews.com/blog/galleries

my random views

Thanks, that's been my current workaround, but I was wondering if there's a way to automatically add this to all Blog posts rather than having to add in a button to each individual blog?

Thank you.

On 8/21/2022 at 8:27 PM, AlexSaunders said:

Site URL: https://processworkuk.squarespace.com

Hi there,

Is there a way to add a 'Back to Blogs' button at the top left-hand side of the individual blog pages, the same as you see on Events pages?

Thanks,

Alex

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<a href="/news" class="eventitem-backlink">Back to All Blogs</a>').insertBefore('.blog-item-title');
	});
</script>
<style>
  a.eventitem-backlink {
    margin: 0;
}
</style>

Thank you, this works well. However, I have used blog collection pages for different parts of my site, so is there a way to add this code to the different blogs but update the 'Back to Blogs' text?

Many thanks,

Alex 

11 hours ago, AlexSaunders said:

Thank you, this works well. However, I have used blog collection pages for different parts of my site, so is there a way to add this code to the different blogs but update the 'Back to Blogs' text?

Many thanks,

Alex 

Move code to each blog Page Header

Amazing, thank you!

How do I get this "back to all blogs" button to be at the bottom of my blog post? it works when I paste it into the Page Header Code Injection of the main blog page, but does not show up when i paste it into the Post Blog Item Code Injection

On 2/12/2023 at 12:28 PM, unhingedadventures said:

How do I get this "back to all blogs" button to be at the bottom of my blog post? it works when I paste it into the Page Header Code Injection of the main blog page, but does not show up when i paste it into the Post Blog Item Code Injection

Can you share link to a blog post on your site? We can check code easier

On 2/15/2023 at 4:45 AM, tuanphan said:

Can you share link to a blog post on your site? We can check code easier

https://www.unhingedadventures.com/brazil/blog-post-title-two-ynkza

Pass: hello

I currently have a button returning me to all blogs but I manually add this after each post. Is it possible to automatically have this after every blog post, and with the same button formatting/style?

On 2/24/2023 at 10:56 AM, unhingedadventures said:

https://www.unhingedadventures.com/brazil/blog-post-title-two-ynkza

Pass: hello

I currently have a button returning me to all blogs but I manually add this after each post. Is it possible to automatically have this after every blog post, and with the same button formatting/style?

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block tp-button-block"><div class="sqs-block-content"><div class="sqs-block-button-container sqs-block-button-container--center"><a href="/brazil" class="sqs-block-button-element--small sqs-button-element--secondary sqs-block-button-element">Back to Brazil Blogs</a></div></div></div></section>').insertBefore('body[class*="type-blog"].view-item section#itemPagination');
 }); 
</script>
<style>
 section#back-to {
    background-color: #f0f0ee;
}
</style>

18 hours ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block tp-button-block"><div class="sqs-block-content"><div class="sqs-block-button-container sqs-block-button-container--center"><a href="/brazil" class="sqs-block-button-element--small sqs-button-element--secondary sqs-block-button-element">Back to Brazil Blogs</a></div></div></div></section>').insertBefore('body[class*="type-blog"].view-item section#itemPagination');
 }); 
</script>
<style>
 section#back-to {
    background-color: #f0f0ee;
}
</style>

Thank you! I added the following after background-color to create a bigger space between the button and the pagination ribbon in mobile view (adding in case others want to use):

margin-bottom: 25px;

@tuanphan do you know how I might be able to add this back button to the end of the blog text, not left aligned, not a special button class? Just something simple.

I'm using a blog for a team page, here is an example https://www.acceleratorecosystem.org/our-team/brittany-betts

Thank you!

On 7/11/2023 at 3:16 PM, luke4 said:

@tuanphan do you know how I might be able to add this back button to the end of the blog text, not left aligned, not a special button class? Just something simple.

I'm using a blog for a team page, here is an example https://www.acceleratorecosystem.org/our-team/brittany-betts

Thank you!

Add it here?

Add to Settings > Developer Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block tp-button-block"><div class="sqs-block-content"><div class="sqs-block-button-container sqs-block-button-container--center"><a href="/brazil" class="sqs-block-button-element--small sqs-button-element--secondary sqs-block-button-element">Back to Brazil Blogs</a></div></div></div></section>').insertAfter('.blog-item-content.e-content');
 }); 
</script>

Change text + url here

Hello - I want to add a Back button (as noted in the pink circle) that links back to the main blog page.  Any suggestions?  I'd like that button to say Back To All Stories.  Thanks, friends! 

On 2/4/2024 at 12:21 AM, PLW said:

Hello - I want to add a Back button (as noted in the pink circle) that links back to the main blog page.  Any suggestions?  I'd like that button to say Back To All Stories.  Thanks, friends! 

Hi, Yes. Possible.

Can you share link to this blog? We can test code easier

Thank you!  Our website is currently password protected until we are ready to go public in a couple of days.  Do you need the password too?  

This is the page we want each individual blog (we call them stories) to link back to https://turkey-greyhound-4sy3.squarespace.com/config/pages/65bbeaf38d91887ebf6978d6

Appreciate the help!  

On 2/6/2024 at 12:23 AM, PLW said:

Thank you!  Our website is currently password protected until we are ready to go public in a couple of days.  Do you need the password too?  

This is the page we want each individual blog (we call them stories) to link back to https://turkey-greyhound-4sy3.squarespace.com/config/pages/65bbeaf38d91887ebf6978d6

Appreciate the help!  

You can share that password, I can access easier

Note: access password, not login password

Hello, I need help in adding a button to back to all posts at the middle bottom of the page? I'm not good with coding, but I know where to paste the code. Thank you so much!

Link: https://www.venturabuddhistcenter.org/tho/s-su

On 9/15/2024 at 4:09 AM, andyle1 said:

Hello, I need help in adding a button to back to all posts at the middle bottom of the page? I'm not good with coding, but I know where to paste the code. Thank you so much!

Link: https://www.venturabuddhistcenter.org/tho/s-su

Use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) { 
   $('<div class="sqs-block-button button-block back-to"><div class="sqs-block-button-container--center"><a href="/tho" class="sqs-button-element--primary sqs-block-button-element--medium sqs-block-button-element">Back To Blog</a></div></div>').appendTo('.item-pagination[data-collection-type^="blog"]');
 }); 
</script>
<style>
.item-pagination-link--prev, .item-pagination-link--next {
    margin: 0 !important;
    max-width: 33.333% !important;
}
.item-pagination-link--next {
    order: 3;
}
.sqs-block-button.button-block.back-to {
    order: 2 !important;
}
section#itemPagination {
    justify-content: space-between;
}
</style>

Result