Thanks for purchasing!
You can download the plugin and get all updates using this link:
Link: will-myers.com/blog-post-banner-installation
Password: zxcv1234
1) Download the following code file and add it to your Squarespace site. You can do this by adding them as a FILE in any Link Editor.
WMBlogPostStyles.js
WMBlogPostStyles.css
2) Add this code to the Settings » Developer Tools » Code Injection » Site Header Code Injection area. Be sure the value within the href attribute matches the file name that you uploaded.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="/s/WMBlogPostStyles.css" rel="stylesheet">HTML
Copy
3) Add This code to your settings » developer tools » code injection » page footer area:
<script src="/s/WMBlogPostStyles.js"></script>HTML
Copy
Be sure the link within the src & href attribute match the url’s of the uploaded files you just uploaded (not necessarily the filename).
If you’re also using my secondary Nav plugin, be sure to place the Nav Replacer <script> below the Secondary Nav <script> in the footer.
2) Add a Blog Post Style
Choose from one of the 6 styles. You can either apply these types to individual blog post pages or an entire blog collection.
Style 2
Style 3
Style 4
Style 5
Style 6
Style 1
To apply a style to an individual blog page. Paste the below code in a code block on the individual page.
To apply a single style to all blog posts in your blog collection. Paste the below code in the Blog Collection Settings » Advanced » Post Blog Item Code Injection area.
If you’re using Squarespace 7.0 you’ll need to add this code into a Code or Markdown block on each blog post.
If you’re on a personal plan and don’t have access to the Code block or the Blog Collection Settings » Advanced » Post Blog Item Code Injection area, add this code into a Markdown block to each blog post.
<div data-wm-plugin="blog-post" data-post-style="1"></div>HTML
Copy
Optional Attribute
Attribute
Default
Options
data-img-src
thumbnail
'image-url.jpeg', 'seo'
data-excerpt
false
true, false
If you want to add a custom bannerimage, that isn’t the blog post thumbnail image, you have the ability to add the image URL within a data-img-src attribute, like so:
<div data-wm-plugin="blog-post" data-post-style="1" data-img-src="imgURL.jpeg"></div>HTML
Copy
Alternatively, you can pull in the “social share” image by adding ‘seo’ into that same field.
<div data-wm-plugin="blog-post" data-post-style="1" data-img-src="seo"></div>HTML
Copy
If you’d like the excerpt to display below the title, you can add in the data-excerpt data attribute.
<div data-wm-plugin="blog-post" data-post-style="1" data-excerpt="true"></div>HTML
Copy
Style Customizations
Any code you choose to use below should be added to your Design » Custom CSS area unless otherwise specified.
If you’re wanting a specific style to apply to just one page, place the code in between <style> … </style> tags in a code block on the specific page.