Jump to content

Adding a CTA list at the bottom of blog posts only

Recommended Posts

Hi

I've linked an example of a website that has a CTA list on the bottom of each blog post.

I'd like to do the same for my blog posts - update it and have it populate across all of them.

I'm on the Business Plan if that's relevant.

Thanks in advance.

Link to comment
15 hours ago, Ameer410 said:

I mean this one just above it:

image.thumb.png.4a43ddb59c2ce35127ac621f1f4f0d51.png

(1) You can create a Not Linked Page with Name/URL: Blog CTA - /blog-cta

and design layout

(2) Install Section Loader Supreme Plugin

(3) Add this code to Blog Post Item Code Injection

<div data-wm-plugin="load" data-target="/blog-cta"></div>

image.thumb.png.0f361472f20062d010a2f3d361ef6f66.png

(4) Add this code to Website > Website Tools > Code Injection > Footer (under #2 plugin code)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
  if (detail.target !== '/blog-cta') return;
  $('div.wm-load-container').insertBefore('body[class*="type-blog"].view-item footer.sections');
})
</script>
<style>
.wm-load-container+section {
    padding-top: 0px !important;
}
</style>

(5) In case you don't have a budget to buy plugin. You can let me know, I will give another guide to do this by use Section in Footer.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/14/2024 at 12:30 AM, Ameer410 said:

(5) In case you don't have a budget to buy plugin. You can let me know, I will give another guide to do this by use Section in Footer.

Could you please show me this way?

(1) First, add a Section in Footer, suppose this section is Second Section

(2) Use this code to Website > Website Tools > Code injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$('footer.sections section:nth-child(2)').insertBefore('[class*="type-blog"].view-item footer.sections');
});
</script>

(3) Use this code to Website Tools > Custom CSS

footer.sections section:nth-child(2) {
	display: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.