'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